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.