React/Redux中如何优化Dispatch派发逻辑减少重复代码

安全阿岳

2026-9-25

代码优化方案

原代码存在的问题

当thingNoErrors存在有效值时，会重复执行2次constants.SUCCESSFUL类型的dispatch操作，以及2次callback回调，属于明显的逻辑bug，会导致状态重复更新、回调重复触发
相同的成功操作逻辑分散在两个分支，后续维护成本高，修改一处就要同步修改另一处

优化思路

把两个分支的差异部分（成功后的payload数据）提前计算，公共的成功操作（dispatch、callback）统一放到分支外执行，彻底消除冗余。

优化后的代码

export const saveThing =
  ({ thingNoErrors = [], thingWithErrors = [], callback = () => {} }) =>
  async (dispatch) => {
    try {
      dispatch({ type: constants.REQUESTING });
      // 初始化成功后返回的默认数据
      let successData = [...thingWithErrors];

      if (thingNoErrors?.length) {
        const formData = new FormData();
        // 原代码用Object.keys遍历数组语义不清晰，直接遍历数组项更合理
        thingNoErrors.forEach(item => {
          if (item?.name && item?.file) {
            formData.append(item.name, item.file);
          }
        });
        const response = await axios.post(`${API_URL}/sample/api`, formData);
        // 合并接口返回数据和错误数据
        successData = [...response.data, ...thingWithErrors];
      }

      // 统一执行成功操作，仅执行一次
      dispatch({
        type: constants.SUCCESSFUL,
        payload: { data: successData }
      });
      callback('success');
    } catch (error) {
      dispatch({ type: constants.ERROR });
      // 若业务需要错误时也触发回调，可在此处补充 callback('error')
    }
  };