Redux principles: store, actions, reducers

WHAT THIS TESTS Whether you understand Redux's predictability guarantees and how the store, actions, and reducers cooperate to enforce a single source of truth, read-only state, and pure updates.

A GOOD ANSWER COVERS Single source of truth: the entire application state lives in one store as a single tree, making it easy to inspect, persist, and debug. State is read-only: the only way to change it is to dispatch an action, a plain JavaScript object with a type field and any payload, describing what happened. Changes are made with pure functions: reducers take the current state and an action and return the next state, never mutating the input and never performing side effects, so the same inputs always yield the same output. The flow is a cycle: a component dispatches an action, the store runs the root reducer to compute a new immutable state, and subscribed components re-render from the updated store. This determinism enables time-travel debugging, easy testing, and predictable behavior. Side effects and async work go in middleware like thunks or sagas, not in reducers.

COMMON WRONG ANSWERS Mutating state inside a reducer, for example pushing to an array, which breaks immutability and change detection. Performing API calls or other side effects in reducers instead of middleware. Treating actions as functions rather than plain descriptive objects. Saying the store can be written directly without dispatch. Confusing reducers, which compute state, with action creators, which build action objects.

LIKELY FOLLOW-UPS Why must reducers be pure, and what breaks if they are not? Where do async calls belong, and how do thunks fit? How does Redux Toolkit's createSlice let you write apparently mutating code safely via Immer?

ONE CONCRETE EXAMPLE A cart reducer handles an action of type ADD_ITEM with a payload product. It returns a new state object with items set to a new array spreading the old items plus the product, leaving the previous state untouched. A component dispatches { type: 'ADD_ITEM', payload: product }; the store computes the new state and notifies subscribers, so the cart badge re-renders. The async fetch of the product happens in a thunk before dispatch, keeping the reducer pure.