如何使用 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'
      })
    }

});