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

Question

Accepted Answer

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. Directly mutating the state when not using Immer (outside of RTK). Forgetting to return a new state object when using classic Redux reducers. Returning `undefined` from a reducer, which breaks the Redux state update cycle. Incorrectly handling `extraReducers` or mismatched action types. Using async operations directly inside reducers instead of with thunks. Not updating nested objects correctly (e.g., overwriting entire state unintentionally). Accidentally shadowing or mutating action payload data. // ❌ Incorrect: Returning undefined or mutating state improperly
const userReducer = (state, action) => {
  if (action.type === 'user/update') {
    state.name = action.payload; // Direct mutation (invalid in classic Redux)
  }
};

// ✅ Correct: Using RTK's Immer or returning new state
import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { name: '' },
  reducers: {
    updateUser: (state, action) => {
      state.name = action.payload; // Works fine with Immer in RTK
    }
  }
});

export const { updateUser } = userSlice.actions;
export default userSlice.reducer; Understanding these pitfalls helps ensure reducers behave predictably, maintain immutability, and trigger UI updates correctly.

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

Scenario Questions

Follow-up Questions