Redux Toolkit Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. + void

Are you tired of seeing this error message in your Redux Toolkit application?

Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft. + void

Don’t worry, you’re not alone! This error can be frustrating, but it’s actually a sign that you’re using Redux Toolkit correctly (most of the time). In this article, we’ll dive into the root cause of the issue, explain what it means, and provide step-by-step solutions to fix it.

What is Immer?

Before we dive into the error, let’s take a quick look at Immer. Immer is a popular JavaScript library used for creating immutable data structures. It’s a key component of Redux Toolkit, allowing you to create reducers that handle complex state transformations in an efficient and predictable way.

In Immer, a “producer” is a function that takes a draft state as an argument and returns a new state or modifies the draft state. Sounds simple, right? Well, things can get complicated when you try to do both at the same time…

The Error: An Immer Producer Returned a New Value *and* Modified Its Draft

This error occurs when an Immer producer (i.e., a reducer function) returns a new value and also modifies the draft state. This is a no-no in Immer land, as it can lead to unexpected behavior and state inconsistencies.

Think of it like trying to eat your cake and have it too (literally!). If you return a new value, you’re essentially saying, “Hey, I’ve created a new state, use this instead!” But if you also modify the draft state, you’re simultaneously saying, “Wait, no, use this modified draft state instead!” Immer gets confused and throws an error.

Why Does This Error Happen?

There are a few common reasons why this error might occur:

• Returning a new value while modifying the draft state:

  
        const reducer = (draft) => {
          draft.foo = 'bar';
          return { foo: 'baz' }; // Error!
        }
      

• Using Object.assign() or the spread operator:

  
        const reducer = (draft) => {
          draft = { ...draft, foo: 'bar' }; // Error!
          return draft;
        }
      

• Using Array.prototype methods that modify the original array:

  
        const reducer = (draft) => {
          draft.items.push('new item'); // Error!
          return draft;
        }
      

Solutions

Solution 1: Return a New Value Only

If you want to return a new value, make sure you don’t modify the draft state. Instead, create a new object or array and return it:

const reducer = (draft) => {
  return { ...draft, foo: 'bar' };
}

Solution 2: Modify the Draft State Only

If you want to modify the draft state, make sure you don’t return a new value. Instead, modify the draft state and return void (i.e., undefined):

const reducer = (draft) => {
  draft.foo = 'bar';
  return; // or return void
}

Solution 3: Use Immer’s produce() Function

In some cases, you might need to return a new value and modify the draft state. In this scenario, use Immer’s produce() function to create a new draft state and return it:

import { produce } from 'immer';

const reducer = (draft) => {
  return produce(draft, (draft) => {
    draft.foo = 'bar';
  });
}

Best Practices

To avoid this error and ensure predictable behavior in your Redux Toolkit application, follow these best practices:

1. Keep your reducers simple and focused: Avoid complex logic and multiple state transformations in a single reducer. Break them down into smaller, more manageable functions.
2. Use Immer’s produce() function: When in doubt, use produce() to create a new draft state and return it. This ensures that you’re not modifying the original state and reduces the risk of errors.
3. Be mindful of state mutations: Avoid using Array.prototype methods that modify the original array (e.g., push(), splice(), etc.). Instead, use Immer’s built-in support for arrays and objects.
4. Test your reducers thoroughly: Verify that your reducers are working correctly and not producing unexpected side effects. Use tools like Redux DevTools to inspect your state and catch errors early on.

Conclusion

The “An immer producer returned a new value *and* modified its draft” error might seem daunting at first, but it’s actually a simple mistake to fix. By understanding the root cause of the issue and applying the solutions outlined in this article, you’ll be well on your way to creating robust and predictable state management in your Redux Toolkit application.

Remember to keep your reducers simple, use Immer’s produce() function when needed, and be mindful of state mutations. With practice and patience, you’ll become a Redux Toolkit master and error-free state management will be a breeze!

Solution	Description
Return a new value only	Create a new object or array and return it, without modifying the draft state.
Modify the draft state only	Modify the draft state and return void (i.e., undefined), without returning a new value.
Use Immer’s produce() function	Use produce() to create a new draft state and return it, allowing you to modify the draft state and return a new value.

Frequently Asked Question

Get answers to the most common questions about Redux Toolkit’s error messages. Don’t let errors hold you back from building amazing apps!