Use immer `MapSet` plugin with redux toolkit

Question

I have some slices that use Sets in their state. I have this code:

import { configureStore } from '@reduxjs/toolkit';
import { enableMapSet } from 'immer';
import { reducers } from './reducers';

enableMapSet();

export function configureStore() {
    const rootReducer = combineReducers({
        ...reducers,
    });

    return configureStore({
        reducer: rootReducer,
    });
}

const store = configureStore();
export type AppDispatch = typeof store.dispatch;
export default store;

Although I installed the immer and call enableMapSet(), I still get an error when my app loaded:

Unhandled Rejection (Error): [Immer] The plugin for 'MapSet' has not been loaded into Immer. To enable the plugin, import and call enableMapSet() when initializing your application.

How should I configure the enableMapSet with Redux Toolkit?

manroe · Accepted Answer · 2021-04-30T05:20:14.433

The previously accepted answer was at least helpful for me to figure out the issue I was having, similar to OP.

I have been storing Maps in older versions of Redux for a long time without issues, I see the statement that you should not do this all over the internet but it's hardly ever justified with reasons. The one reason I see occasionally is that they aren't serializable. However, I don't save my Redux state to e.g. LocalStorage so the serializable concerns don't seem to affect me.

To solve OP's problem, given the accepted answer's advice that there may be more than one version of immer present in my application, I went to my yarn.lock file to see which version @reduxjs/toolkit was depending on (7.0.3 as of reduxjs/tookit@1.4.0) and made sure the one I added to my own package.json was the same. (yarn add immer installed a newer version of immer than Redux uses).

Once I made that change, my call to enableMapSet() got rid of the error OP and I had.

I had 2 immer versions also... – pixelearth Aug 29 '23 at 14:56 — pixelearth, Aug 29 '23 at 14:56

score 8 · Answer 2 · answered Jan 05 '21 at 14:41

8

Two thoughts here:

It's possible that you might have two different copies of Immer in your app
Having said that, you should not be putting non-serializable objects like Maps and Sets into the Redux state anyway, which is why we don't turn on enableMapSet in the first place.

answered Jan 05 '21 at 14:41

markerikson

63,178
10
141
157

I've installed `immer` seperatly like here: https://github.com/reduxjs/redux-toolkit/issues/466 I'm aware that is not recommended, but it can make our life easier... :) – nrofis Jan 05 '21 at 17:17
Why are `Map` and `Set` not considered serializable? Seems to be more an issue of redux choosing not to serialize them, rather than an inherent property of `Map` and `Set`? Maybe the term `serializable` should be defined in the documentation? – Domi Aug 13 '22 at 13:28
1

"Serializable" has always been understood by the JS community in general to mean "can be re-created exactly by calling `JSON.parse(JSON.stringify(originalValue))`". That behavior is limited to plain JS objects, arrays, and primitives. You can pass `Map/Set` into `JSON.stringify()` and get a result, but you can't get `Map/Set` values back from `JSON.parse()` (unless you override the reviver handling). – markerikson Aug 13 '22 at 20:26
@markerikson Not sure I agree on the "universal definition of `serializable`" here - hah! Either way, thanks for the explicitness! – Domi Aug 19 '22 at 08:55

Use immer `MapSet` plugin with redux toolkit

2 Answers2