是否可以将方法添加到 redux 切片状态

Question

我正在尝试这个

const initialState = { 
    warningModal: {
        show: false,
        question: "are you sure?",
        description: "placeholder",
        confirming: () => {
            alert('test me')
        }
    },
}
export const uiSlice = createSlice({ 
    name: "ui",
    initialState,
    reducers: {
        showWarningModal: (state, action) => {
            state.warningModal = true
            state.warningModal.confirming = action.payload // haven't tested
        },
        hideWarningModal: (state) => {
            state.warningModal.show = false
        }
    }
});

我正在创建一个可重复使用的弹出窗口模型。当我点击不同的按钮（比如删除各种东西）时，我会显示模型并更改当我点击确认时发生的事情

但在控制台中我得到了这个

A non-serializable value was detected in the state, in the path: ui.warningModal.confirming.

这是否意味着它无法完成或我做错了

Answer 1

这意味着虽然可能，但它可能会导致错误，您不应该这样做 - non-serializable 作为函数的值通常会导致 redux-persist 或 devtools 等中间件出现问题。

一般来说，我认为没有太多理由使用 Redux 管理模态 - 我建议您考虑仅使用带有 Portal 的可重用组件 - 大多数 UI 库都是这样做的。也许您甚至会找到一个 UI 库，其中已经包含您要使用的模态组件。

是否可以将方法添加到 redux 切片状态

Is it possible to add a method to redux slice state

redux

react-redux

redux-toolkit