Redux & Redux Toolkit — App-Wide State ManagementEntry 2 of 11
How Redux Works
Redux is a predictable state container. All shared state lives in one central store, and it changes only when an action is dispatched to a pure reducer.
Notes
The flow is one-way:
- A component dispatches an action: a plain object describing what happened (
{ type: 'increment' }). - Redux forwards the action to the reducer.
- The reducer takes the old state and the action, and returns a new state.
- The store saves the new state.
- Components subscribed to that part of the state re-render.
Building blocks:
- Store: Holds the entire state tree. One per app.
- Action: Plain object with a
typeand optional payload. - Reducer: Pure function
(state, action) => newState. No side effects, no async, no mutation. - Dispatch: Sends an action to the store.
- Selector: Function that reads a piece of state.
Components never change the store directly.
What / Why / When
- What
A centralized, event-driven state model.
- Why
Every change goes through one predictable path, so state transitions are traceable and debuggable (Redux DevTools supports time-travel).
- When
Many components read and update the same data.
Quick reference
| Concept | Redux | NgRx |
|---|---|---|
| Central container | Store | Store |
| Event | Action | Action |
| State transition | Reducer | Reducer |
| Send event | dispatch() | store.dispatch() |
| Read state | Selector | Selector |
| Side effects | Thunks | Effects |