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:
- Improved Performance
Let’s try to break it down step by step:
- View(A user) triggers an action by interacting with the user interface.
- 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.
- A Reducer ‘reduces’ the state in the store to some desired state as mentioned in the action.
- The store gets updated and it triggers the view to be re-rendered to show the updated state.