如何使用createSlice实现多Action复用相同状态处理逻辑？

在传统Redux写法中，我们可以让多个不同的Action类型对应完全相同的状态处理逻辑，比如下面这个认证相关的reducer：

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem("xts0");
      return {
        ...state,
        token: null,
        user: null,
        isAuthenticated: false,
        isLoading: false,
      };
    default:
      return state;
  }
}

现在需要用Redux Toolkit的createSlice工具实现同样的效果，现有初始代码如下：

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError(state, action){},
    loginFail(state, action){},
    // 其他类似action
  }
})

实现方案 #

把重复的状态更新逻辑提取成独立函数，再将这个函数赋值给各个需要共享逻辑的reducer字段即可，既保证逻辑复用，又符合createSlice的写法规范：

// 提取共享的状态处理逻辑
const resetAuthState = (state) => {
  localStorage.removeItem("xts0");
  state.token = null;
  state.user = null;
  state.isAuthenticated = false;
  state.isLoading = false;
};

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    authError: resetAuthState,
    loginFail: resetAuthState,
    logoutSuccess: resetAuthState,
    registerFail: resetAuthState,
  }
})

// 导出生成的action creators
export const { authError, loginFail, logoutSuccess, registerFail } = authSlice.actions;
export default authSlice.reducer;

补充说明 #

Redux Toolkit的createSlice允许直接将多个reducer方法指向同一个函数，它会自动为每个方法绑定对应的action类型。另外，createSlice基于Immer库实现了不可变更新的语法糖，所以我们可以直接修改state对象，无需像传统写法那样返回新的state副本。

内容的提问来源于stack exchange，提问作者Mehtab Alam Khan