Express.js Tutorial

ReactJS Introduction React Environment Setup ReactJS versions React JSX ReactJS Components Pros and Cons of ReactJS ReactJS features ReactJS vs Vue ReactJS vs AngularJS ReactJS vs React Native React State React Props React Props Validation React State vs Props React Component API React Component life-cycle React Controlled vs Uncontrolled components React Constructor React Forms React Events React Conditional Rendering React Lists React Keys React Refs React Fragments React Router React CSS React Bootstrap React Animation React Table React Map React Higher Order components React Code-Splitting React Hooks React Context React Flux React Flux vs MVC React Redux React Portals React Error Boundaries MaterialApp class in Flutter ReactJS | Calculator App (Introduction) ReactJS Calculator App - Structure ReactJS Calculator App (Building UI) ReactJS Calculator App (Styling)

React Flux
2019-12-07 10:53:36

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:

  1. Dispatcher
  2. Stores
  3. 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.

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.
5isDispatching() 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.