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 但我只想分派一个动作并在两种不同的状态下更改状态。

我知道这可以用 vanilla redux 来完成，redux 也推荐使用它 Here

简而言之，我试图复制 this 但在 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'
      })
    }

});

如何使用redux-toolkit中的createSlice方法在不同的reducer函数中使用单个动作类型

1 个答案: