【问题标题】:Is it possible to call a reducer function from another reducer function (within the same slice) using Redux Toolkit?是否可以使用 Redux Toolkit 从另一个 reducer 函数(在同一切片内)调用 reducer 函数?
【发布时间】:2020-12-13 07:11:51
【问题描述】:

我有这个小的模块管理片:

const WorkspaceSlice = createSlice({
    name: "workspace",
    initialState: {
        activeModule: null,
        modules:
        {
            ["someModule"]: { ...moduleRenderingData },
        },
    },
    reducers: {
        setActiveModule(state, action)
        {
            state.activeModule = action.payload;
        },
        addModule(state, action)
        {
            const { moduleName, renderingData } = action.payload; 
            if (!state.modules[moduleName])
            {
                state.modules[moduleName] = renderingData;
            }

            // state.activeModule = moduleName; <- basically the same as 'setActiveModule'
            this.setActiveModule(state, action.payload.module); // <- 'this' is undefined
        },
    },
});

export default WorkspaceSlice;

我要做的是从addModule 中调用setActiveModule,这样我就不会有重复的代码,但我收到一个错误,因为this 未定义。
有没有办法从另一个减速器中调用一个减速器?它的语法是什么?
如果没有,是否有可能以另一种方式实现此功能,假设我想将 addModulesetActiveModule 保留为单独的操作?

【问题讨论】:

    标签: javascript reactjs redux react-redux redux-toolkit


    【解决方案1】:

    createSlice 返回的slice 对象包含您作为slice.caseReducers 传入的每个单独的case reducer 函数,以帮助解决此类情况。

    所以,你可以这样做:

    addModule(state, action) {
        const { moduleName, renderingData } = action.payload; 
        if (!state.modules[moduleName]) {
            state.modules[moduleName] = renderingData;
        }
    
        WorkspacesSlice.caseReducers.setActiveModule(state, action);
    },
    

    此外,reducer 函数没有this,因为不涉及类实例。它们只是函数。

    【讨论】:

    • 非常感谢!我不知道 caseReducers - 我尝试使用 .reducers,但正如预期的那样,它也不起作用。
    • 如果使用它将我的减速器传递给 slice.reducers 会怎样?
    • @Jesswin:不确定你在问什么——你能澄清一下吗?
    猜你喜欢
    • 2021-01-24
    • 2020-04-14
    • 2021-05-05
    • 1970-01-01
    • 2018-10-18
    • 2017-08-12
    • 1970-01-01
    • 2022-11-22
    • 1970-01-01
    相关资源
    最近更新 更多