获取错误“在状态中检测到不可序列化的值"使用 redux 工具包时 - 但不适用于普通的 redux [英] Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux

问题描述

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

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up as soon as I switched over to configureStore from createStore:

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)

经过一番摸索，我发现问题似乎出在我的自定义模型上.例如，varietals 数组是从品种模型创建的:

After poking around I found the issue seems to be with my custom models. For example the varietals array is created from a varietal model:

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

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

and using that I map over an array of strings to create my Varietal array which goes into my state:

// 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);

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

When I switched out the model and replaced the array creating utility with something that returned a plain array of objects like this:

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

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

then that got the error to go away for that PARTICULAR reducer, however I have these custom models all through my app and before I start ripping them all out and recoding them simply to be able to use the Redux Toolkit I wanted to ask here if that is REALLY what the issue is before I did that...

推荐答案

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

Yes. We've always told Redux users they should not put non-serializable values in the store. Redux Toolkit was specifically designed to help provide good defaults when setting up a Redux store, and as part of that, it includes checks to make sure you're not accidentally mutating your data and that you're not including non-serializable values.

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

Class instances are by definition not fully serializable, so it's correctly flagging those instances as a problem. Please rewrite your logic to not pass those in to the store.

一般来说，React 和 Redux 应用程序应该仅使用纯 JS 对象和数组作为数据来编写.您不需要模型类".

In general, React and Redux apps should be written using only plain JS objects and arrays as data. You don't need "model classes".

这篇关于获取错误“在状态中检测到不可序列化的值"使用 redux 工具包时 - 但不适用于普通的 redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！