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

Posted 2023-03-25

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

【英文标题】：How to use single action type in different reducer function with createSlice method in redux-toolkit

【发布时间】：2021-04-06 19:06:41

【问题描述】：

多个 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 位于两个不同的 reducer 中，因为我只导出 isAuthenticated 的 loginSuccess 我只能使用该操作进行调度。 我知道我也可以从 currentUser 导出 loginSuccess，但我只想调度一个动作并在两种不同的状态下更改状态。

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

简而言之，我正在尝试复制 this，但使用 redux-tool-kit 中的 createSlice 方法。

提前感谢您的帮助。

【参考方案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'
      )
    

);