在React/Redux的Reducer中用常量写switch case是否为良好实践？

这绝对是非常好的开发实践，甚至可以说是Redux开发中的标准做法之一，原因如下：

• 彻底避免拼写错误: 硬编码action类型字符串很容易出现拼写失误，比如把ADD_CUSTOMER写成ADD_COSTUMER，这类错误很难排查。用常量代替的话，编辑器会提供语法检查和自动补全，拼写错误会在开发阶段就暴露出来。
• 大幅提升可读性: 像ACTION_LIST.add这样的常量名，比冗长的字符串ACTION_TYPE/ADD_CUSTOMER更直观，看代码时能立刻明白对应的操作逻辑，尤其是当action类型命名复杂的时候。
• 简化维护流程: 如果需要修改某个action类型的字符串值，只需要在常量定义处改一次就行，不用在reducer、action creator等所有用到的地方逐个修改，避免遗漏和重复劳动。
• 获得编辑器增强支持: 现代IDE会对常量提供跳转定义、查找引用等功能，开发时能快速定位到所有使用该action类型的代码，效率更高。

不过有个小建议：最好把这些action常量抽离到单独的文件（比如actionTypes.js），而不是只在reducer内部定义。这样action creator函数也能复用这些常量，确保整个项目中action类型的一致性，不会出现reducer和action creator用了不同字符串的情况。

举个优化后的例子：

// actionTypes.js
export const ACTION_LIST = {
  add: 'ACTION_TYPE/ADD_CUSTOMER',
  remove: 'ACTION_TYPE/REMOVE_CUSTOMER',
  update: 'ACTION_TYPE/UPDATE_CUSTOMER',
};

// reducer.js
import { ACTION_LIST } from './actionTypes';
import { produce } from 'immer';

const reducer = produce((draft, action) => {
  const { type, payload } = action;

  switch (type) {
    case ACTION_LIST.add: {
      // 处理逻辑
      break;
    }
    case ACTION_LIST.remove: {
      // 处理逻辑
      break;
    }
    case ACTION_LIST.update: {
      // 处理逻辑
      break;
    }
    default:
      // 默认处理
  }
});

// actionCreators.js
import { ACTION_LIST } from './actionTypes';
export const addCustomer = (payload) => ({
  type: ACTION_LIST.add,
  payload,
});

总的来说，用常量管理action类型是Redux开发中的推荐做法，在中大型项目里能显著提升代码的可维护性和可靠性。

内容的提问来源于stack exchange，提问作者Bugman Huang