Implement Scalable State Management Solutions

This skill covers state management architecture across frontend frameworks - choosing patterns, configuring stores, implementing middleware, and optimizing state updates for complex applications. Core principles: single source of truth (centralize shared state, separate local from global state, minimize redundancy, normalize relational data), immutability and pure functions (return new state rather than mutating, pure reducers, Immer-style immutable updates, deterministic and testable updates), and unidirectional data flow (actions to reducers to state to UI, with middleware for cross-cutting concerns like logging and async operations).

Redux setup is demonstrated with modern Redux Toolkit configuration:

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import userSlice from './slices/userSlice'
import apiSlice from './api/apiSlice'

export const store = configureStore({
  reducer: {
    user: userSlice,
    api: apiSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }).concat(apiSlice.middleware),
  devTools: process.env.NODE_ENV !== 'production',
})

setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

and a slice pattern (createSlice/createAsyncThunk for an async user-profile fetch, with pending/fulfilled/rejected cases updating loading status, profile data, and error state). Zustand is covered as a lightweight alternative, with a basic store combining devtools, persist, and immer middleware (partializing only theme and user for persistence) and a sliced-stores pattern that composes multiple slice creators - for example an auth slice with login/logout - into one store. A Context+Reducer pattern is also covered: a typed context with a switch-based reducer (loading/user/error/settings actions), a provider exposing state and bound action dispatchers, and a hook that throws if used outside the provider.

Performance optimization covers memoized selectors (createSelector combining base selectors into a derived, cached selector) and custom hooks with useMemo-based filtering to avoid recomputing derived lists on every render. State normalization is shown via a normalizeData utility that converts an array into byId/allIds shape, used inside a posts slice reducer to keep normalized relational data.

Best practices cover state-structure design (flat and normalized state, separating UI state from domain state, TypeScript for shape safety, error boundaries around state-dependent components), async state management (explicit loading/success/error handling, retries and timeouts, RTK Query or SWR for server state, strategic caching and invalidation), testing strategy (unit-test reducers across action scenarios, test selectors independently with mock state, use Redux Toolkit Testing or Zustand testing utilities, mock external dependencies), and migration/scaling guidance (start with local state and lift up as needed, use state machines like XState for complex transitions, persist state strategically, consider a micro-frontends approach for large apps with isolated state domains).

Use it when choosing or configuring a state management solution - setting up Redux Toolkit slices, a Zustand store, or a Context+Reducer pattern, optimizing selectors, or normalizing relational state. It is not a general React-patterns or component-architecture guide - it is scoped to where and how application state lives and updates, not component composition or rendering strategy.

Given an application's state requirements (shared vs. local, sync vs. async, persistence needs), it produces store configuration and slice code for Redux Toolkit, Zustand, or Context+Reducer, plus memoized selectors and normalization utilities for the resulting state shape.

Covers @reduxjs/toolkit (configureStore, createSlice, createAsyncThunk, createSelector, RTK Query), Zustand with its devtools/persist/immer middleware, React's Context and useReducer, and references RTK Query, SWR, and XState for adjacent concerns like server state and state machines.

Frontend engineers architecting or optimizing state management for a React or similar application.