如何使用 redux-toolkit 中的 createSlice 方法在不同的减速器 function 中使用单动作类型

Question

是否有可能多个reducer（使用createSlice 方法创建）必须响应相同的操作？

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

const isAuthenticated = createSlice({
    name: 'isAuthenticated',
    initialState: false,
    reducers: {
        loginSuccess(state, action) {
            return true;
        },
        logout(state, action) {
            return false;
        },
    },
});

export const { loginSuccess, logout } = isAuthenticated.actions;

export default isAuthenticated.reducer;

const currentUser = createSlice({
    name: 'currenUser',
    initialState: 'jhon',
    reducers: {
        loginSuccess(state, action) {
            return 'steve';
        },
        logout() {
            return state;
        },
    },
});

export const currentUserReducer = currentUser.reducer;

正如您所看到的，action.type loginSuccess位于两个不同的减速器中，因为我只导出 isAuthenticated 的loginSuccess我只能使用该操作进行调度。 我知道我也可以从 currentUser 导出loginSuccess ，但我只想调度一个动作并将 state 更改为两种不同的状态。

我知道这可以用香草 redux 和 redux 来完成，推荐在这里使用它

简而言之，我试图复制它，但使用 redux-tool-kit 中的 createSlice 方法。

提前感谢您的帮助。

Answer 1

您正在寻找extraReducers ：

const isAuthenticated = createSlice({
    name: 'isAuthenticated',
    initialState: false,
    reducers: {
        loginSuccess(state, action) {
            return true;
        },
        logout(state, action) {
            return false;
        },
    },
});

export const { loginSuccess, logout } = isAuthenticated.actions;

export default isAuthenticated.reducer;

const currentUser = createSlice({
    name: 'currenUser',
    initialState: 'jhon',
    reducers: {
        logout() {
            return state;
        },
    },
    extraReducers: builder => {
      builder.addCase(isAuthenticated.actions.loginSuccess, () => {
        return 'steve'
      })
    }

});