Redux Interview Questions — Easy

• Definition: A predictable state container for JavaScript apps. State lives in one store; the only way to change it is dispatching actions into pure reducers.
• Problems solved:
  • Prop drilling - any component can subscribe to exactly the slices it needs.
  • Unpredictable mutations - immutability makes every change traceable.
  • Scattered state logic - transitions are centralized and testable.
• Best suited to complex, shared client state; overkill for purely local UI state.

---

• Single source of truth - the entire app state is one object tree stored in one store.
• State is read-only - components never mutate; they dispatch plain action objects describing what happened.
• Changes via pure functions - reducers take (previousState, action) and return the next state, with no side effects. These three rules give you time-travel debugging, deterministic tests and trivial undo/redo foundations.

---

• Store - holds state, exposes getState(), dispatch(), subscribe().
• Action - a plain object { type, payload? } describing an event.
• Action creator - a function returning an action (keeps dispatch sites clean and typed).
• Reducer - pure function producing next state per action.
• Dispatch - the only mutation entry point.
• Selector - function reading derived data from state (state => state.cart.items).

---

• An action is the payload object itself: { type: 'cart/add', payload: { id } }.
• An action creator is the function that builds it: const addToCart = id => ({ type: 'cart/add', payload: { id } }).
• Why bother with creators: centralizes action shapes, gives TypeScript a single typed factory, keeps components free of string literals, and (with thunks/sagas) becomes the place where async logic starts.
• With Redux Toolkit you rarely hand-write them - createSlice generates creators automatically from reducer names.

---

function cartReducer(state = initialState, action) {
  switch (action.type) {
    case 'cart/add':
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}

Rules:

1. Pure - same inputs ⇒ same output; no API calls, no Date.now/Math.random.
2. No mutation - spread/copy every touched level.
3. Default case returns state unchanged (enables cheap bailouts).
4. Never return undefined - React state reads will explode.

---