How to fix The return value of the reducer must be a new object, not the draft in React

// Incorrect - both mutates AND returns
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    state.value = action.payload; // Mutation
    return state; // Explicit return - ERROR!
  });
});

// Correct - only mutate
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    state.value = action.payload; // Just mutate, no return
  });
});

// Also correct - only return (no mutation)
const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    return { ...state, value: action.payload }; // Return new object
  });
});

// Choose EITHER mutation style:
case 'UPDATE_VALUE':
  draft.value = action.payload;
  // No return statement - Immer handles it
  break;

// OR return style:
case 'UPDATE_VALUE':
  return {
    ...state,
    value: action.payload
  };

// NOT both:
case 'UPDATE_VALUE':
  draft.value = action.payload; // Mutation
  return draft; // Return - ERROR!

# Check installed versions
npm list immer redux @reduxjs/toolkit

# If there's a version mismatch, let Redux Toolkit manage Immer:
npm uninstall immer
npm install @reduxjs/toolkit

# Redux Toolkit will bring its own compatible Immer version

import { current } from '@reduxjs/toolkit';

const reducer = createReducer(initialState, (builder) => {
  builder.addCase(someAction, (state, action) => {
    console.log('Current draft state:', current(state));
    state.value = action.payload;
    // No return needed
  });
});

// current() creates a plain copy for inspection without affecting the draft

// From mutation to return style:
// Before:
state.items.push(action.payload);

// After:
return {
  ...state,
  items: [...state.items, action.payload]
};

// From return to mutation style:
// Before:
return { ...state, count: state.count + 1 };

// After:
state.count += 1;