How to fix Cannot mutate state in a non-immer reducer in React

Look for places in your reducer where you are directly modifying the state object. Common patterns include assignment to properties (state.someField = action.payload), array methods that mutate in-place (push, pop, splice, sort), and modifying nested objects without copying.

For objects, use the spread operator to create a new object with the updated property:

return {
  ...state,
  field: action.payload
};

For arrays, use methods that return new arrays:

// Adding an item
return [...state, action.payload];
// Removing an item
return state.filter(item => item.id !== action.payload);
// Updating an item
return state.map(item => 
  item.id === action.payload.id ? { ...item, ...action.payload } : item
);

Redux Toolkit includes Immer by default in createSlice and createReducer. You can write code that looks like it mutates state, but Immer safely produces immutable updates:

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      // This looks like a mutation but is safe with Immer
      state.push(action.payload);
    }
  }
});

Make sure you are using Redux Toolkit version 1.0 or later.

Ensure your reducer does not have side effects (like API calls, DOM manipulation) and always returns a new state object when changes occur. If no changes are needed, return the existing state object unchanged.

After making changes, verify that your UI updates correctly and that Redux DevTools shows proper state changes. Use time-travel debugging to ensure each action produces a clean state snapshot.