Redux分派布尔值返回不可序列化错误

uujelgoq 于 2023-02-16 发布在其他

关注(0)|答案(2)|浏览(120)

我尝试使用Redux在状态中设置一个布尔值来显示/隐藏一个元素。
每当我分派一个布尔值时，就会显示以下错误：

在状态 * 中检测到不可序列化的值，这很奇怪，因为布尔值是完全可序列化的？

Todo.js

import { useSelector, useDispatch } from "react-redux";

export default function Planner() {
  const dispatch = useDispatch();

  function createHandleClickOpen() {
    dispatch(createDialogOpen(true));
  }

createHandleClickOpen绑定在按钮的onClick（）方法上。
Plannerstore.js

import { createSlice } from "@reduxjs/toolkit";

export const plannerSlice = createSlice({
  name: "planner",
  initialState: {
    createDialogOpen: false,
  },
  reducers: {
    createDialogOpen: (state) => (value) => {
      state.createDialogOpen = value;
    },
  },
});

// Action creators are generated for each case reducer function
export const { createDialogOpen } = plannerSlice.actions;

export default plannerSlice.reducer;

Store.js

import { configureStore } from "@reduxjs/toolkit";
import plannerSlice from "../../feature/planner/plannerStore";

export default configureStore({
  reducer: {
    planner: plannerSlice,
  },
});

redux

来源：https://stackoverflow.com/questions/75460813/redux-dispatch-boolean-returns-non-serializable-error

2条答案

按热度按时间

dgenwo3n1#

你的减速器出了问题。
您应该使用action有效负载来检索您分派的值：

export const plannerSlice = createSlice({
  name: "planner",
  initialState: {
    createDialogOpen: false,
  },
  reducers: {
    createDialogOpen: (state, action) => {
      state.createDialogOpen = action.payload;
    },
  },
});

赞(0）回复(0）举报 2023-02-16

omhiaaxx2#

这里的具体问题是减速器写错了。
您已经：

createDialogOpen: (state) => (value) => {
      state.createDialogOpen = value;
    },

这意味着它是"一个以state为参数的函数，并返回一个以value为参数的函数"。
reducer的结果是它返回的结果（或者在RTK + Immer的情况下，是你在state中"变异"的结果），所以这里的问题是你返回了一个函数，而函数是不可序列化的。
另一个问题是，我们不用value来描述reducer的任何参数，参数是(state, action)，对于createSlice，通常重要的是action.payload字段。
如另一条评论所述，正确的语法应该是：

createDialogOpen: (state, action) => {
      state.createDialogOpen = action.payload;
    },

赞(0）回复(0）举报 2023-02-16

我来回答

Redux分派布尔值返回不可序列化错误

2条答案

相关问题

热门标签

最新问答