Redux / Global State Patterns
A predictable state container pattern where all application state lives in a single store, updated exclusively through dispatched actions processed by pure reducer functions.
Description
Redux and the broader family of global state patterns implement a unidirectional data flow where application state is centralized in a single store. State changes follow a strict pipeline: components dispatch actions (plain objects describing what happened), reducers (pure functions) compute the next state from the current state and the action, and the store notifies subscribed components to re-render. This pattern, inspired by Elm and Flux, makes state changes predictable, traceable, and easy to debug because every mutation flows through a single, auditable path.
Redux Toolkit (RTK) is the modern standard for Redux development, providing createSlice for reducer/action co-location, createAsyncThunk for side effects, RTK Query for data fetching with automatic caching and invalidation, and configureStore with sensible defaults including Redux DevTools and serializable state checks. Alternatives in the global state space include Zustand (minimal API, no boilerplate), Jotai (atomic state model), Recoil (graph-based derived state), and MobX (transparent reactive programming). Each makes different trade-offs between boilerplate, performance, and mental model.
The key principle underlying all global state patterns is single source of truth: by centralizing state, you eliminate synchronization bugs where multiple components hold conflicting copies of the same data. Redux DevTools enable time-travel debugging, action replay, and state snapshots. The trade-off is that global state can become a dumping ground for data that should be local to a component or managed by a server-state library like React Query. Modern best practice is to use global state only for truly global concerns (auth, theme, feature flags) and delegate server cache management to purpose-built tools.
Prompt Snippet
Set up Redux Toolkit with createSlice for auth state (user, tokens, permissions) and UI preferences (theme, sidebar, locale), using RTK Query with createApi for all server data fetching. Define tag-based cache invalidation so that mutations automatically refetch affected queries (e.g., invalidating 'Posts' tag after createPost). Configure the store with a custom middleware stack: RTK default middleware plus a WebSocket middleware that dispatches actions on incoming messages. Use typed hooks (useAppSelector, useAppDispatch) from a central hooks file, and enforce that no component directly imports from 'react-redux'.
Tags
Related Terms
Component-Level vs Global State
The architectural decision of whether state should live within a single component, be lifted to a shared ancestor, or be placed in a global store based on its scope and consumer count.
Middleware Pattern
A pattern where request processing is composed as a chain of functions, each of which can inspect, transform, or short-circuit the request before passing it to the next handler.
Observer Pattern
A behavioral design pattern where an object (subject) maintains a list of dependents (observers) and notifies them automatically of state changes.
MVVM Pattern
An architectural pattern where a ViewModel mediates between the View and Model, enabling two-way data binding and eliminating direct View-Model coupling.