Data Flow

This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.

If you're still not convinced, read Motivation and for a compelling argument in favor of unidirectional data flow. Although Redux is not exactly Flux, it shares the same key benefits.

The data lifecycle in any Redux app follows these 4 steps:

You can call from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.

• The Redux store calls the reducer function you gave it.
  The store will pass two arguments to the : the current state tree and the action. For example, in the todo app, the root reducer might receive something like this:

Note that a reducer is a pure function. It only computes the next state. It should be completely predictable: calling it with the same inputs many times should produce the same outputs. It shouldn't perform any side effects like API calls or router transitions. These should happen before an action is dispatched.

Here's how works. Let's say you have two reducers, one for a list of todos, and another for the currently selected filter setting:

It will then combine both sets of results into a single state tree:

While is a handy helper utility, you don't have to use it; feel free to write your own root reducer!

• The Redux store saves the complete state tree returned by the root reducer.
  This new tree is now the next state of your app! Every listener registered with store.subscribe(listener) will now be invoked; listeners may call to get the current state.

Now, the UI can be updated to reflect the new state. If you use bindings like React Redux, this is the point at which is called.