React Flux
React Flux Introduction
It is an application architecture that is internally used by Facebook to build the client-web application with react. It is useful when the project includes dynamic data, and we require to keep our data updated effectively. It decreases the runtime errors.
It is a programming concept, in which the data is uni-directional. This data entered in the app and flows in one direction until it gets rendered on the screen.
There are three primary roles of a flux application:
- Dispatcher
- Stores
- Views (React Components)
Even the controllers also exist in the Model-view-controller (MVC) model, but the controller-views (views) in the Flux found at the top of the hierarchy. The dispatcher, stores, and the views are the independent nodes. The actions are the new objects that contain new data and type property.
Now, let’s discuss the various components of the flux architecture.
Dispatcher
The dispatcher is a central hub for the react flux application, and it also manages all of the data flow of the flux application. It has not its real intelligence, and it simply acts as a mechanism for the distribution of the actions to the stores. It handles all events that modify the stores. When the action creator gives the new action to the dispatcher, then all stores receive those actions via the callbacks in the registry.
There are five methods of the dispatcher’s API that are as follows:
| S.no | Methods | Definition |
| 1 | register() | It is used for registering the store’s action handler callback. |
| 2 | unregister() | It is used to unregister the store callback. |
| 3 | waitFor() | It is used to wait for a specified callback to run first. |
| 4 | dispatch() | It is used for the action dispatch. |
| 5 | isDispatching() | It is used in checking if the dispatcher is dispatching an action. |
Stores
It contains the logic and state of the application. It is like the model in the traditional MVC. It is used to maintain a particular state within the app. It emits the change event to alert the controller view.
Views
It receives the data from the store and re-renders the application. It is also called as controller-view. It locates on the top of the chain to store the logic, to generate the actions, and to receive the new data from the store. It is a react component that listens to change the events and receives the data from the stores and re-renders the application.
Actions
The actions are sent to the dispatcher for triggering the data flow.
Advantages of Flux
There are some advantages of Flux that are given as follows:
- The uni-directional data flow is easy to understand.
- It is easy to maintain.
- The parts of the flux application are decoupled.
- It is open-source and has more design patterns than the formal framework like MVC architecture.