View ToC

ReactJS - Flux Concept

Flux is a 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 the screen.

Flux Elements

Following is a simple explanation of the flux concept. In the next chapter, we will learn how to implement this into the app.

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

  • Dispatcher − This is a 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 a particular state and it will update when needed.

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

The data flow is depicted in 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.