是否可以使用Redux Toolkit从另一个reducer函数(同一切片内)调用一个reducer函数?

toe95027  于 2023-03-02  发布在  其他
关注(0)|答案(2)|浏览(252)

我有这样一个小模块管理片:

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未定义。
有没有办法从一个reducer内部调用另一个reducer?语法是什么?
如果没有,假设我希望将addModulesetActiveModule作为单独的操作,是否可以用另一种方式实现此功能?

ldfqzlk8

ldfqzlk81#

createSlice返回的slice对象包括作为slice.caseReducers传入的每个大小写还原器函数,以帮助处理此类情况。
因此,您可以:

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

    WorkspacesSlice.caseReducers.setActiveModule(state, action);
},

另外,reducer函数没有this,因为没有涉及类示例,它们只是函数。

mzsu5hc0

mzsu5hc02#

Redux工具包文档中有一个示例,您可以阅读如何操作:

const slice = createSlice({
  name: 'test',
  initialState: 0,
  reducers: {
    increment: (state, action: PayloadAction<number>) => state + action.payload,
  },
})

// also available:
slice.caseReducers.increment(0, { type: 'increment', payload: 5 })

相关问题