Day 140 - Redux Data Flow

We now know some of the basics of Redux and know how to use Redux in our application and now its time to look at the Redux Data Flow and how Redux handles data.

One-Way Data Flow

Redux works on the One-Way Data Flow principle. One-Way Data Flow principle means is a cycle of data being updated and UI being updating on that data and so on. The sequence of steps of one-way data flow is following.

• An app have a state which describes it condition at one point.
• The UI is rendered based on that state.
• The state is updated when some event happens like a user clicks a button.
• The UI is again rendered with the updated state.

Reudx manages state simillarly likes this. Its a one-way data flow. Now we look at Redux and how it does this data flow.

Redux Data Flow

Initially Redux have a store that we define using the createStore function with a reducer functionas the argument to the createStore function. The store calls the root reducer once to save the initial state of the store the return value of the root reducer. And the UI is rendred at first with that initial state.

Now this is how a data flows in the Redux application.

• Some change happens in the application like adding a new todo item.
• An action is dispatched from the application.
• The store runs the reducer function with the action telling the reducer what value to update.
• The store updates the state.
• The store notifies all parts of the UI that the state has been updated.
• The UI is rerendered according to the new state.

Here's how it looks visually.

This is all I think I will learn about the Redux for now. To learn more about the Redux, Check out the Official Documentation of Redux. It is explained very well in the docs and I also used Docs for these posts as well.