ReactJS - Flux Concept


Flux is programming concept where the data is uni-directional. This data enters the app and flows through it in one direction until it is rendered on screen.

Flux Elements

This is simple explanation of the flux concept. In our next tutorial we will explain how to implement this into your app.

  • Actions − Actions are sent to dispatcher to trigger the data flow.

  • Dispatcher − This is central hub of the app. All the data is dispatched and sent to the stores.

  • Store − Store is the place where the application state and logic are held. Every store is maintaining particular state and it will update it when needed.

  • View − The view will receive data from the store and re render the app.

You can see this data flow on the following image.

React Flux Concept Image

Flux Pros

  • Single directional data flow is easy to understand.
  • The app is easier to maintain.
  • The app parts are decoupled.