Redux is a predictable state container for JavaScript apps.

Keep your state flat.

Redux Flow

mutation and asynchronicity

Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen.

To change something in the state, you need to dispatch an action. An action is a plain JavaScript object (notice how we don’t introduce any magic?) that describes what happened.

Finally, to tie state and actions together, we write a function called a reducer. Again, nothing magical about it—it’s just a function that takes state and action as arguments, and returns the next state of the app.

Three Principles

1. Single source of truth (The state of your whole application is stored in an object tree within a single store.)
2. State is read-only (The only way to change the state is to emit an action, an object describing what happened.)
3. Changes are made with pure functions (To specify how the state tree is transformed by actions, you write pure reducers.)

Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state.