"A state mutation was detected inside a dispatch " error after update to immer 7.0.0

See original GitHub issue

🙋‍♂ Question

I have this code, which was working well after updating to immer 7.0.0

const accountsSlice = createSlice({
  name: 'accounts',
  initialState,
  reducers: {
    fetchAccountsInit(state) {
      return produce(state, (draft) => {
        draft.status.isFetching = true;
        draft.errors.fetching = [];
      });
    },
...

Today I updated the immer to 7.0.0 and I’m getting this error:

Unhandled Rejection (Error): Invariant failed: A state mutation was detected inside a dispatch, in the path: accounts.errors.fetching. Take a look at the reducer(s) handling the action {"type":"accounts/fetchAccountsInit"}. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)

On Github releases page, I found this :

[BREAKING CHANGE] produce no longer accepts non-draftable objects as first argument

What am I doing wrong there?

It’s related? Is there a migration guide since there are tons of breaking changes? I couldn’t find a migration guide on the website.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
markeriksoncommented, Jun 11, 2020

Yeah, RTK already uses Immer internally, and we’re currently shipping Immer v6. Please don’t upgrade it yourself - my guess is that some kind of version/package mismatch ended up breaking things.

We’ll put out a new RTK release in the next couple days with Immer v7 instead.

1reaction
mweststratecommented, Jun 11, 2020

Hmm that looks like a special assertion coming from RSK. I don’t think you need to install, or import produce from Immer in the first place, as afaik RSK already ships with Immer baked in: https://redux-toolkit.js.org/api/createReducer#direct-state-mutation

Summoning @markerikson, he probably has a better idea what that means.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Redux: A state mutation was detected inside a dispatch
Basically, the Venue being passed was deleted and I want to update the relevant fields on all Trips that reference the deleted Venue....
Read more >
A state mutation was detected between dispatches-Reactjs
Coding example for the question React and Redux: Uncaught Error: A state mutation was detected between dispatches-Reactjs.
Read more >
Migrating to RTK Query - Redux Toolkit
We have our reducers containing our request handling logic defined here, storing the appropriate 'status' and 'data' in our state based on ......
Read more >
Dependencies | @teambit/staged-components.top-bar | npm
arrow_right @teambit/react‑router. 0.0.73 Notes Relation Lice... Version 0.0.73 Published October 13, 2020 arrow_right classnames. 2.3.2 Notes Relation Lice... Version 2.3.2 Published September 13, 2022 Description
Read more >
oss-product.txt - Glide Apps
The following NPM packages may be included in this product: ... `error`: Only use when user App would stop functioning correctly - super...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found