Reducer与Switch的最佳实践：简化TypeScript状态更新代码

问题分析 #

你当前的reducer每次新增action时，都需要手动罗列所有未修改的状态字段，不仅繁琐还容易遗漏。利用对象解构和类型映射可以彻底解决这个问题。

基础优化：对象解构简化状态更新 #

最直接的优化是使用ES6对象解构语法，先展开原state的所有字段，再覆盖需要更新的目标字段，无需手动维护未修改的字段：

// 先优化ACTIONTYPE的payload类型，去掉any保证类型安全
type ACTIONTYPE =
  | { type: "SET_LIQUIDITY_DATA"; payload: AppState['tvl'] }
  | { type: "SET_LIQUIDITY_BAR_DATA"; payload: AppState['barChart'] }

function reducer(state: AppState, action: ACTIONTYPE) {
  switch (action.type) {
    case "SET_LIQUIDITY_DATA":
      return { ...state, tvl: action.payload };
    case "SET_LIQUIDITY_BAR_DATA":
      return { ...state, barChart: action.payload };
    default:
      return state;
  }
}

这样新增action时，只需要在switch中添加一个case，返回{ ...state, [目标字段]: action.payload }即可，不用再逐一写其他未修改的字段。

进阶优化：类型映射表统一管理action #

如果想进一步减少重复代码，甚至不用每次修改switch逻辑，可以通过类型映射表将action类型与状态字段绑定，让reducer自动处理状态更新：

// 定义action类型到状态字段的映射，确保类型安全
const ActionStateMapping: Record<string, keyof AppState> = {
  SET_LIQUIDITY_DATA: 'tvl',
  SET_LIQUIDITY_BAR_DATA: 'barChart'
};

// 自动推导ACTIONTYPE类型，无需手动逐个定义
type ACTIONTYPE = {
  [K in keyof typeof ActionStateMapping]: {
    type: K;
    payload: AppState[typeof ActionStateMapping[K]];
  };
}[keyof typeof ActionStateMapping];

function reducer(state: AppState, action: ACTIONTYPE) {
  const targetField = ActionStateMapping[action.type];
  if (targetField) {
    return { ...state, [targetField]: action.payload };
  }
  return state;
}

这种模式下，新增action只需要在ActionStateMapping中添加一行映射关系即可，reducer会自动识别并处理对应的状态更新，完全不需要修改reducer的核心逻辑。

额外建议 #

• 移除payload的any类型，改用AppState['对应字段']来约束payload类型，避免类型不匹配的错误
• 如果你的项目中action类型较多，这种映射方式可以大幅降低维护成本，同时保证代码的一致性

内容的提问来源于stack exchange，提问作者Rodrigo Burgos