Redux's Design for Surgical Re-renders and Predictable State

Global State Without Prop Drilling or Wasteful Passes

Prop drilling forces irrelevant components to pass state like isLoggedIn through layers—App to Layout to Navbar to UserAvatar—even when intermediates don't use it. Redux fixes this by storing shared state in a single central store outside the React component tree, accessible by any component via react-redux hooks.

State is data that changes over time and triggers UI re-renders. Local useState notifies React via setState, but plain let variables fail because they don't signal changes or persist across re-renders. Redux's store holds all global state as one predictable JavaScript object, eliminating threading and enabling direct access.

When state like x changes (with 4 subscribers out of 10 total), only those 4 components re-render—not the whole app or all subscribers. useSelector(state => state.x) subscribes components to specific slices via a newsletter-like model: Redux tracks per-slice subscribers and notifies surgically on changes.

useSelector runs after every store update, performing strict === equality checks on selected values. Creating new objects inline like useSelector(state => ({ x: state.x })) fails because {} !== {} by reference, causing unnecessary re-renders. Fix by using separate useSelectors or memoized selectors from reselect.

Unidirectional Flow Ensures Predictability and Debuggability

Changes flow one way: user event → dispatch(action) → reducer computes new state → store updates → subscribers notified.

Actions are plain objects describing intent, e.g., { type: "increment", incrementBy: 5 } or { type: "addToCart", item: { id: 42, name: "Red Shoes" } }. They carry no logic.

Reducers are pure functions (state, action) => newState using switch on action.type. They return immutable copies via spreads like { ...state, value: state.value + action.incrementBy }, never mutating. Unknown types return unchanged state. Purity enables testing and predictability—no side effects like API calls.

useDispatch() provides the dispatch function; you never call reducers directly. This pipeline creates an audit trail: every change traces to dispatched actions, powering Redux DevTools for inspecting actions, before/after states, rewinding to past states, and replaying bugs.

Redux Toolkit Cuts Boilerplate While Preserving Principles

Classic Redux requires manual action types, creators, and switch reducers—verbose for one feature. Redux Toolkit (RTK)'s createSlice bundles them:

import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state, action) => {
      state.value += action.payload.incrementBy;  // Immer enables 'mutation'
    }
  }
});
export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

Dispatch as dispatch(increment({ incrementBy: 5 })); RTK auto-generates typed action creators. Immer converts mutating syntax to immutable updates under the hood, reducing code without risks.

Redux Beats Context for Scale and Tools

Context solves prop drilling but re-renders all consumers on any value change—no granular subscriptions. Fine for simple globals like theme; wasteful for complex, frequent updates.

Redux adds granular efficiency, DevTools time-travel, middleware for async (e.g., redux-thunk), and team-scale consistency. Use Context for slow-changing basics; Redux for large apps needing performance, debugging, and enforced patterns.

Mental model: Store as central whiteboard. useSelector reads and sticks a subscription note. Changes via action notes to reducer 'manager'—logged for replay. No direct scribbles.