使用 redux 工具包时出现错误“在状态中检测到不可序列化的值” - 但不是普通的 redux

Question

我正在尝试将我正在构建的应用程序切换为使用 Redux Toolkit，并且在我从 createStore 切换到 configureStore 时注意到出现此错误：

A non-serializable value was detected in the state, in the path: `varietals.red.0`. Value:, Varietal {
  "color": "red",
  "id": "2ada6486-b0b5-520e-b6ac-b91da6f1b901",
  "isCommon": true,
  "isSelected": false,
  "varietal": "bordeaux blend",
}, 
Take a look at the reducer(s) handling this action type: TOGGLE_VARIETAL.
(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)

在四处探索之后，我发现问题似乎出在我的自定义模型上。例如，品种数组是从品种模型创建的：

class Varietal {
  constructor(id, color, varietal, isSelected, isCommon) {
  this.id = id;
  this.color = color;
  this.varietal = varietal;
  this.isSelected = isSelected;
  this.isCommon = isCommon;
 }
}

并使用它映射一个字符串数组来创建我的 Varietal 数组，该数组进入我的状态：

// my utility function for creating the array
const createVarietalArray = (arr, color, isCommon) =>
  arr.map(v => new Varietal(uuidv5(v, NAMESPACE), color, v, false, isCommon));';

// my array of strings
import redVarietals from '../constants/varietals/red';

// the final array to be exported and used in my state
export const COMMON_RED = createVarietalArray(redVarietals.common.sort(), 'red', true);

当我切换模型并用返回一个普通对象数组的东西替换数组创建实用程序时：

export const createVarietalArray = (arr, color, isCommon) =>
  arr.map(v => ({
    id: uuidv5(v, NAMESPACE),
    color,
    varietal: v,
    isSelected: false,
    isCommon,
  }));

那么对于那个 PARTICULAR 减速器，错误就消失了，但是我在我的应用程序中都有这些自定义模型，在我开始将它们全部撕掉并重新编码它们只是为了能够使用 Redux Toolkit 我想在这里问在我这样做之前真的是问题所在......

Answer 1

随着getDefaultMiddleware折旧，可以通过使用来解决

   middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),

Answer 2

是的。我们一直告诉 Redux 用户他们不应该在 store 中放置不可序列化的值。Redux Toolkit 专门设计用于帮助在设置 Redux 存储时提供良好的默认值，作为其中的一部分，它包括检查以确保您不会意外地改变您的数据，并且您不包括不可序列化的值。

类实例根据定义不是完全可序列化的，因此它正确地将这些实例标记为问题。请重写您的逻辑，不要将它们传递给商店。

通常，React 和 Redux 应用程序应该仅使用纯 JS 对象和数组作为数据来编写。您不需要“模型类”。

Answer 3

这更有可能是redux-persist. redux-toolkit在其中提供一些默认中间件getDefaultMiddleware

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

您可以通过提供 false 标志来禁用每个中间件。去除serializableCheck

const customizedMiddleware = getDefaultMiddleware({
  serializableCheck: false
})

有关详细信息，请查看redux-toolkit 文档。

Answer 4

此示例显示排除可序列化状态检查中间件，在此处输入链接描述

 const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})

Answer 5

查看 RTK 文档，了解如何使用 Redux Persist 进行设置。

https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist

基本上就是这一行：

middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    })

这是在configureStore 调用中。

另外，你还需要这个：

import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist'

Answer 6

React Native当我想redux-persist与 一起实施时，我遇到了这个问题@reduxjs/toolkit，我收到了这个错误：

然后我通过以下代码修复它：

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from '@reduxjs/toolkit';
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storage from 'utils/storage'; // in fact it is AsyncStorage
import counter from 'reduxStore/reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const reducer = combineReducers({
  counter,
});

const persistedReducer = persistReducer(persistConfig, reducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
});

export const persistor = persistStore(store);

export default store;

实际上，这些行对我有帮助，没有它们我会遇到上述错误：

middleware: getDefaultMiddleware({
  serializableCheck: {
    ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
  },
}),

Answer 7

我添加了“middleWare”参数和“serializedCheck: false”，问题解决了。（实际上这不是问题）

来源：链接

 import { configureStore } from '@reduxjs/toolkit'
    import rootReducer from './reducer'
    import { myCustomApiService } from './api'
    
    const store = configureStore({
      reducer: rootReducer,
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: false,
        }),
    })