12 / 13

What are common mistakes that cause reducers not to update state?

Difficulty: 5/10
immutable updates, returning new state, immer usage

Reducers in Redux Toolkit must follow certain rules to correctly update the state. Common mistakes usually involve incorrect state mutations, returning the wrong value, or misusing immutability principles.

Frequent Mistakes in Reducer Logic
  1. 1

    Directly mutating the state when not using Immer (outside of RTK).

  2. 2

    Forgetting to return a new state object when using classic Redux reducers.

  3. 3

    Returning undefined from a reducer, which breaks the Redux state update cycle.

  4. 4

    Incorrectly handling extraReducers or mismatched action types.

  5. 5

    Using async operations directly inside reducers instead of with thunks.

  6. 6

    Not updating nested objects correctly (e.g., overwriting entire state unintentionally).

  7. 7

    Accidentally shadowing or mutating action payload data.

Example: Correct vs Incorrect Reducer State Updates

Understanding these pitfalls helps ensure reducers behave predictably, maintain immutability, and trigger UI updates correctly.

Scenario Questions

0-2 years experience

  1. 1You have a counter slice using createSlice. If you forget to return the updated state from the increment reducer, what will the UI show after dispatching the action?
  2. 2Write a reducer that toggles a boolean flag using RTK. What must you avoid to ensure the component re‑renders?
  3. 3If you directly assign to state.someValue outside of Immer's draft, why might the component not update?

2-5 years experience

  1. 1You added a new field to a slice, dispatched an action, but the UI never reflects the change. How would you troubleshoot this in an RTK application?
  2. 2A reducer that uses array.splice stopped updating the UI after a recent refactor. Explain why this happens and how you’d fix it.
  3. 3After extracting a helper that returns a new object, the reducer still doesn’t cause a re‑render. What common mistake could be the cause?

5-8 years experience

  1. 1In a large codebase, several reducers that share nested state aren’t triggering updates. Discuss strategies to guarantee immutable updates across slices and the trade‑offs of relying on Immer versus manual copying.
  2. 2You notice performance issues because reducers are returning deep copies of large objects on every action. How would you redesign them to avoid unnecessary re‑renders while staying correct?
  3. 3When integrating RTK Query with local reducers, a reducer fails to update after a successful mutation. What state‑shape or reducer‑pattern issues could cause this, and how would you resolve them?

8+ years experience

  1. 1Your team is migrating legacy Redux code to RTK. Many reducers mutate state directly, causing silent failures. Outline a migration plan that addresses these mistakes at scale, including linting, code reviews, and automated tests.
  2. 2Across multiple micro‑frontends, you need consistent reducer patterns to avoid missed state updates. What architectural guidelines and tooling would you put in place?
  3. 3As the product grows, state slices become deeply nested. How would you redesign the state model and reducer logic to prevent common update bugs while keeping the store performant?

Follow-up Questions

  • What linting or testing tools would you add to catch these mistakes early?
  • How does Immer change the way you write reducers compared to vanilla Redux?
  • Can you walk me through how you would debug a slice that appears to update but the UI stays stale?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.