foundation
Store
Understand the single state container, subscriptions, dispatch flow, and provider boundaries.
The store holds the single application state tree, exposes `getState`, `dispatch`, and `subscribe`. React apps wrap the tree in `<Provider store={store}>`; hooks `useSelector` and `useDispatch` read and write through that context.
Flow: UI dispatches an action → middleware may intercept → root reducer combines slice reducers → new state → subscribers notify → connected components re-render selected slices.
`configureStore` from Redux Toolkit sets up DevTools, default middleware (including thunk), and optional preloaded state for SSR hydration.
The trade-off is a single predictable container versus boilerplate and the need to slice state for performance.
On interviews: explain why direct store mutation breaks time-travel and change detection.
Common pitfalls: multiple unrelated stores, subscribing the entire state in every component, and creating the store inside render.
Checklist:
- One store per app instance (usually).
- Provider at the app root.
- Subscribe via selectors, not raw getState in render.
- Preload state carefully for SSR/hydration.