Abstract:
This article is about Flux architecture and targeted those users who wish to take advantage of Flux architecture
In this article, we are going to learn: – what is Flux architecture, the need for Flux architecture in web development, some pieces of codes which will explain how to use it. (in this article I will code in JavaScript, however, Flux architecture is an architecture, so no need of programming language dependency).
Introduction:
A Flux is an architectural pattern follow a unidirectional flow of data through your Application mostly used with React, Introduced by ‘Facebook’. It is neither a framework nor library. Flux provides an additional feature to React to enhance their scalability.
Why FLUX?:
As we know that React is a library, not a framework, used to represent ‘VIEW’ part of your application. React is not capable to manage the state of data in a complex application. To manage such a complex application’s data, we used FLUX architecture. Simply React is only ‘V’ while FUX represents M and C compared to MVC modal. Flux pattern is constructed based on four segments organized in a unidirectional manner.
- Action
- Dispatcher
- Store
- View
Nowadays, the top web application development company is taking advantage of Flux architecture, which follows a unidirectional flow of data, to empower React with enhanced scalability.
As we discussed earlier that FLUX used a unidirectional flow of data:
Dispatcher, Store, and View all are independent with separate input and output. The same action or different may be triggered, many times by end user.
Action:
An action is simply an object which contains payloads that we need to send and type of action, which defines what type of action has triggered. Payloads may be a null string or nothing, but action type must be defined, and this action dispatched by the ‘Dispatcher’ to all registered callback.
Action: {
actionType: ’Add_Item’,
payloads: ‘data that need to be send with action’
}
Dispatcher:
The Dispatcher is the central hub that manages all data flow in FLUX application. There should be a single Dispatcher in a FLUX. All stores register itself and provide a callback. The main purpose of Dispatcher is to distribute the action to all stores. Whenever action creators create new action then dispatcher dispatches this action to all stores via a callback.
When your application becomes more complex or increases in size of application then Dispatcher is used to managing dependencies among components or modules.
As we have many components, one’s component outcome dependent on the second component’s outcome then dispatcher firstly updates the second component and used its outcome as input to update the first component.
Five methods of Dispatcher:
register (function callback): It registers a callback to be invoked with every dispatched payload. Returns a token that can be used with waitFor() to definitely update that store.
waitFor([string ids]): It waits for the callbacks specified to be invoked before continuing execution of the current callback. This method should only be used by a callback in response to a dispatched payload.
Unregister(string id): It removes a callback based on its token.
Dispatch(object payload): It dispatches a payload to all registered callbacks.
isDispatching(): It returns a Boolean value that, Is this Dispatcher currently
dispatching.
We use Dispatcher as:
Dispatcher to dispatch the payloads:
var React = require(‘react’);
var Dispatcher = require(‘./../Dispatcher’);
var Store = require(‘./../stores/Store’);
class Incrementer extends React.Component {
constructor() {
super();
this.state = {
value:0
}
}
handleClick() {
Dispatcher.dispatch({
eventName:‘increment’
});
let data=Store.getValue();
this.setState({
value:data
})
}
render() {
return <div>
<p>{this.state.value}</p>
<button onClick={this.handleClick.bind(this)}>Increment</button>
</div>;
}
}
module.exports = Incrementer;
Store:
In FLUX it represents ‘M’ compared to MVC model. The store contains the application’s state and logic. It is simply an object which contains data in key-value pair. It manages the application’s state for a particular domain.
There can be multiple Store in a single application. A store registers itself with the dispatcher and provides it with a callback. This callback receives the action as a parameter. Within the store’s registered callback, a switch statement based on the action’s type is used to interpret the action. This allows an action to result in an update to the state of the store, via the dispatcher. After the stores are updated, they broadcast an event declaring that their state has changed, so the views may query the new state and update themselves.
When view receives the event from the store, it first requests the new data via the stores’ public getter methods. It then calls its methods setState() or forceUpdate() to re-render the view.
var Dispatcher
=require(‘./../Dispatcher’);
//Here
need to import Dispatcher
var Store
= {
value:0,
incrementValue=()=>{
this.value++;
},
getValue:function() {
return this.value;
},
//after dispatching the payloads control goes to all registered callback
Dispatcher.register(function
(payload)
{
switch
(payload.eventName)
{
case ‘increment’:
Store.incrementValue();
break;
}
return true;
});
module.exports
=Store;
Flux is being considered as another armor in React’s capability to make web development services more efficient.
About Author:
Shivam Gupta is a JavaScript developer currently working with QSS Technosoft.
He is a technology writer in, JavaScript libraries and frameworks like Reactjs,
nodejs, Flux, and graphql.
About QSS:
QSS Technosoft has a proven track in executing web applications for its esteemedcustomers. The company has a core competency in developing and deliveringEnterprise level Web Applications.
