Redux & Redux Toolkit — App-Wide State ManagementEntry 1 of 11
Three Kinds of State
State is data that, when changed, updates the UI. It falls into three scopes based on who needs it.
Notes
- Local state belongs to one component: an input value, a toggle. Managed with
useStateoruseReducer. - Cross-component state is shared by a few components: a modal's open/closed flag. Managed with props (lifting state up) or Context.
- App-wide state is needed across the whole app: the logged-in user, a cart, a theme. Managed with Context or Redux.
- Redux targets cross-component and app-wide state. Local state should stay local.
What / Why / When
- What
A way to classify state by scope.
- Why
The scope decides the tool. Putting everything in a global store adds overhead; putting everything in local state causes prop drilling.
- When
Before adding state, ask how many components need it.
Quick reference
| Scope | React | Angular |
|---|---|---|
| Local | useState / useReducer | signal() in the component |
| Cross-component | Props / Context | input() / output() / scoped service |
| App-wide | Context / Redux | providedIn: 'root' service / NgRx |