redux-toolkit createSlice 可以使用 js Map 作为状态吗？

一般来说，使用可变对象，例如Map is 强烈劝阻 https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state.

然而，神奇的immer https://github.com/immerjs/immer允许对不可变对象进行操作，就像它们是可变的一样。

具体来说，immer 支持使用 Map 的不可变版本启用地图集 https://immerjs.github.io/immer/docs/map-set

在 redux 工具包中createReducer and createSlice用 immer 包装状态操作produce.

总的来说，我认为这些事实意味着这样的代码应该是安全的：

import { createSlice } from '@reduxjs/toolkit'

export const testmapSlice = createSlice({
  name: 'testMap',
  // Using a Map() as redux state
  initialState: new Map(),
  reducers: {
    add: (state, action) => {
      state.set(action.payload.identity, action.payload)
    },
  },
})

但是，当我在 React 组件中使用它时，我收到礼貌的错误消息A non-serializable value was detected in the state, in the path: `testMap`. Value: Map(1) {"A" => {…}} Take a look at the reducer(s) handling this action type: testMap/add..

有没有办法安全使用Map没有收到此错误消息？

定义“安全”:)

理论上，你could put anything你想要进入 Redux 商店。

实际上，根据该常见问题解答，不可序列化的值可能会导致 DevTools 之类的东西崩溃（这首先违背了使用 Redux 的大部分目的）。用于Maps 和其他可变实例也可能导致 UI 的某些部分无法正确重新渲染，因为 React-Redux 依赖引用检查来确定数据是否已更改。所以，we 具体来说告诉用户你永远不应该将不可序列化的值放入 Redux 状态 https://redux.js.org/style-guide/style-guide#do-not-put-non-serializable-values-in-state-or-actions.

在这种特殊情况下，您应该能够使用普通 JS 对象作为查找表而不是Map，并完成相同的行为。

作为绝对的最后手段，您可以关闭状态某些部分的序列化检查 https://redux-toolkit.js.org/api/serializabilityMiddleware，但我们强烈建议人们不要这样做。