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

Question

multiplereducer（用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 在两个不同的减速器中，因为我只导出 loginSuccess of isAuthenticated 我可以仅使用该动作进行分派。我知道我也可以从 currentUser 导出 loginSuccess 但我只想分派一个动作并在两个不同的状态下更改状态。

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

简而言之，我正在尝试复制，但使用 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 函数中使用单一动作类型

How to use single action type in different reducer function with createSlice method in redux-toolkit

javascript

reactjs

redux

react-redux

redux-toolkit