Redux
Redux keeps your application’s entire state in one place called a “store”. This avoids passing props through child components because each Component just communicates with the “store”.
- Mutation and asychronicity create complexity that’s hard to understand.
- React was created to solve this in the UI by removing asynchrony and DOM manipulation.
- State is still your problem.
- Redux was created to make state mutations predictable by imposing rules on how/when updates can happen.
- State is an object.
- Actions are objects that you dispatch to describe state changes.
- Reducers are functions that accept state and actions as arguments, and return the next state.
- Single source of truth.
The state of your whole application is stored in an object within a single “store”. - State is read-only.
The only way to change the state is to emit an action, an object describing what happened. - Changes are made with pure functions.
To specify how the state tree is transformed by actions, you write pure reducers.
Redux — Learning Resources
Lots of links to resources.
CSS Tricks — Learning React Redux
- Example: Redux store and one reducer.
- Example: Redux store and multiple reducers.
- How Redux makes undo/redo features easy through rehydration of a serialized state.
- Example:
react-redux
in a React Component.
Courses
Dan Abramov — Getting started with Redux
Free for 30 videos (2 hours). From the creator of Redux.