State Management

The architectural principle of maintaining application state in one centralized, authoritative data structure called a store. Instead of scattering state across numerous components, all data resides in a single object tree. This eliminates data synchronization bugs and makes state serializable, enabling powerful features like time-travel debugging and state persistence. Any change to the store creates a new state object, ensuring immutability and predictable updates.

A strict data lifecycle where state flows in a single, circular direction: Action → Dispatcher → Store → View. User interactions or server responses dispatch actions—plain objects describing an event. A central dispatcher sends actions to stores in order. Stores update state and emit change events. Views re-render from the new state. This cycle prevents cascading updates and makes data flow deterministic and easy to reason about.

The practice of never modifying state objects in place. Instead, every update produces a new copy of the state tree with the changes applied. This is enforced through libraries like Immer or by using native methods like the spread operator. Immutability enables cheap reference equality checks (prevState === nextState) to detect changes, powering performant re-renders in frameworks like React. It also guarantees that no component can accidentally corrupt shared state.

The core mechanism for state transitions. An action is a plain JavaScript object with a type string and an optional payload describing what happened: { type: 'ITEM_ADDED', payload: { id: 1 } }. A reducer is a pure function (state, action) => newState that specifies how the state changes in response to an action. Reducers must be pure—no side effects, no API calls, no mutations. This separation makes logic testable and predictable.

Middleware extends the store's capabilities by intercepting dispatched actions before they reach reducers. This is the designated layer for asynchronous logic like API calls, logging, crash reporting, and routing. Libraries like Redux Thunk, Redux Saga, and Redux Observable provide structured ways to handle side effects without violating reducer purity. Middleware forms a pipeline, allowing cross-cutting concerns to be composed elegantly.

Selectors are pure functions that extract and compute derived data from the store: (state) => derivedValue. They act as a query layer, encapsulating the shape of the state tree and preventing components from knowing its internal structure. Libraries like Reselect provide memoization, recomputing only when relevant state slices change. This pattern keeps components lean and decouples the UI from the raw data model.