Redux 工具包：如何在状态中存储序列化动作创建者？

Question

问题

我正在使用 Redux Toolkit，我想在状态中存储一个动作创建者。当我这样做时，我收到有关我的操作和状态中不可序列化值的错误。使用下面的代码作为我的问题的示例，如何在不抑制警告的情况下解决它？

切片代码

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

export type ModalType =
  {
    type: 'MyModal';
    actionText: string;
    onConfirm: ActionCreatorWithoutPayload;
  }

type ui = {
  modal: ModalType | null;
};

const initialState: ui = {
  modal: null
};

export const slice = createSlice({
  name: 'ui',
  initialState: initialState,
  reducers: {
    showDialog: (state, action: PayloadAction<ModalType>) => {
      state.modal= action.payload;
    },
    someAction: (state) => {
      // do something
    },
  }
});

组件代码

import { someAction } from 'reducers/uiSlice';

<Button
  onClick={() =>
  dispatch(
    showDialog({
      type: 'MyModal', actionText: `Some text`, onConfirm: someAction}
    )
  )}
/>

错误信息

A non-serializable value was detected in an action, in the state: `payload.onConfirm`. Value: ƒ actionCreator() {
    var args = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      args[_i] = arguments[_i];
    }

    if (prepareAction) {
      var prepared = prepareAction.apply(void…

Answer 1

您可以像下面那样禁用 SerializableCheck

import {getDefaultMiddleware} from "@reduxjs/toolkit";
const customMiddleWare = getDefaultMiddleware({
  serializableCheck: false,
});

export default configureStore({
reducer: {
...your reducers
},
 middleware: customMiddleWare,
});

Answer 2

老实说，这是一个糟糕的主意，而且真的完全不应该如何使用 Redux。

根据示例，看起来您正在尝试创建模态并将回调作为道具传递。还有其他方法可以更好地与 Redux 一起使用，事实上几年前我在 Managing Modals and Context Menus with Redux 上写了一个 post。它展示了一些不同的技术，以与 Redux 的使用方式兼容的方式执行此操作。

今天，我推荐的选项是使用自定义中间件来跟踪打开的模式，returns 来自 dispatch(showModal()) 的承诺，并在您执行时解决承诺 dispatch(closeModal(modalId)).

指向 https://github.com/AKolodeev/redux-promising-modals as one option for this. I also have an incomplete but mostly working similar implementation in a gist at https://gist.github.com/markerikson/8cd881db21a7d2a2011de9e317007580 的 post 链接显示了一些可能的方法。

Redux 工具包：如何在状态中存储序列化动作创建者？

Redux Toolkit: How can I store a serialized action creator in state?

javascript

reactjs

redux

react-redux

redux-toolkit

问题

切片代码

组件代码

错误信息

Redux 工具包：如何​​在状态中存储序列化动作创建者？

Redux Toolkit: How can I store a serialized action creator in state?

javascript

reactjs

redux

react-redux

redux-toolkit

问题

切片代码

组件代码

错误信息

Redux 工具包：如何在状态中存储序列化动作创建者？