The Redux flow

March 15, 2021

In previous post we looked into the basics of Redux and what constitutes Redux.

Now we’ll see one of the very concrete and important concepts of Redux which is its unidirectional data flow and the flow of actions which takes place when we update a state in Redux.

Unidirectional data flow

  • What is unidirectional data flow: As the name suggests, the data will flow only in one direction, one-way data binding. In simpler terms, the state will flow out of the Redux store and the user cannot directly update the state.

    To update the state we have to use functions called Reducers which ‘Reduce’ the store’s state to some other state and then the updated state flows out to update the View.

  • Why Unidirectional Data Flow:

    • Predictability
    • Maintainability
    • Improved Performance

The Flow

View(User)→Action→Reducer→Store→Updated View

Let’s try to break it down step by step:

  1. View(A user) triggers an action by interacting with the user interface.
  2. An action is dispatched to Redux to request a state update. The action contains information about what the update should be and any data corresponding to that update.
  3. A Reducer ‘reduces’ the state in the store to some desired state as mentioned in the action.
  4. The store gets updated and it triggers the view to be re-rendered to show the updated state.

Written by Gagandeep Rangi who likes to talk about himself in third person. Twitter Instagram