如何将单个Redux reducer拆分为多个小reducer实现认证状态独立管理

解决方案 #

你需要将原来的单auth切片reducer拆分为两个独立的reducer，分别对应isAuthenticated和user两个顶级状态字段。Redux中所有action会广播到所有reducer，两个reducer可以同时响应同一个SIGN_IN、SIGN_OUT事件，不需要修改现有action的结构。

步骤1：拆分独立reducer

你可以把两个reducer写在同一个文件中按需导出，也可以分成独立文件：

// isAuthenticated 对应的reducer
import { SIGN_IN, SIGN_OUT } from './Types';

// 初始值也可以直接设为!!localStorage.getItem('token')，实现页面刷新保留登录状态
const INITIAL_AUTH_STATE = null;
export const isAuthenticatedReducer = (state = INITIAL_AUTH_STATE, action) => {
  switch(action.type) {
    case SIGN_IN:
      return true;
    case SIGN_OUT:
      return false;
    default:
      return state;
  }
};

// user 对应的reducer
import { SIGN_IN, SIGN_OUT } from './Types';

const INITIAL_USER_STATE = {};
export const userReducer = (state = INITIAL_USER_STATE, action) => {
  switch(action.type) {
    case SIGN_IN:
      // 直接从完整payload里取user字段即可
      return action.payload.user;
    case SIGN_OUT:
      return {};
    default:
      return state;
  }
};

步骤2：修改combineReducers配置

将两个reducer注册为顶级状态节点：

import { combineReducers } from 'redux';
import { isAuthenticatedReducer, userReducer } from './authReducer';
// 导入其他业务reducer

export default combineReducers({
  // 其他原有顶级状态配置
  isAuthenticated: isAuthenticatedReducer,
  user: userReducer
});

完成以上修改后，你就可以直接从Redux根状态中获取state.isAuthenticated和state.user，不需要再通过auth节点访问，且原有SIGN_IN action携带完整返回数据的逻辑不需要做任何调整。

补充：localStorage token存储逻辑

reducer要求是纯函数，不要在其中操作localStorage，可以将相关逻辑放在action中处理：

import { SIGN_IN, SIGN_OUT } from "./Types";

// 异步登录场景（配合redux-thunk使用示例）
export const submitLogin = (loginForm) => async (dispatch) => {
  // 调用后端登录接口
  const loginRes = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(loginForm)
  }).then(res => res.json());
  // 存储token到localStorage
  localStorage.setItem('token', loginRes.token);
  // 触发登录action
  dispatch(signIn(loginRes));
};

export const signIn = response => ({
  type: SIGN_IN,
  payload: response
});

export const signOut = () => {
  // 登出时移除token
  localStorage.removeItem('token');
  return { type: SIGN_OUT };
};

内容的提问来源于stack exchange，提问作者John Bustos