Redux Thunk尝试返回Promise的问题及ActionCreator代码咨询

看起来你在使用Redux Thunk时，对action creator中返回Promise的处理有疑问。我先分析你给出的代码，然后给出优化方案和关键注意点：

你的代码潜在问题 #

你的代码已经基本实现了Thunk返回Promise的逻辑，但有几个可以完善的地方：

1. 缺失错误处理：如果axios.put请求失败，会触发Promise rejection，但你的代码没有捕获这个错误，既没有dispatch失败状态的action，也没有把错误传递给调用者，会导致未捕获的Promise错误，同时UI可能一直处于加载状态。
2. 多余的Promise.resolve()：axios.put().then()本身就会返回一个Promise，你在then回调里手动返回Promise.resolve()是冗余的，直接返回数据或者undefined即可。
3. 状态更新不完整：如果请求失败，isLoaded没有被设为true，会导致加载状态无法结束。

优化后的代码 #

这里是修复并优化后的版本：

export function updateValuesRouting(values, routingID ){
  const url = `${ROOT_ROUTINGS_URL}/${routingID}/editing/meta`;
  console.log("routing url:: ",url, values);
  
  return dispatch => {
    // 触发加载开始的action
    dispatch({type: UPDATE_VALUE_ROUTING_LOADING, isLoaded: false});
    
    // 返回axios的Promise，让调用者可以链式调用
    return axios.put(url, values)
      .then(({data}) => {
        console.log("returned values from updateValuesRouting:",data);
        // 触发成功action，更新状态
        dispatch({type: UPDATE_VALUE_ROUTING, data, isLoaded:true});
        // 返回数据，让调用者可以获取到返回结果
        return data;
      })
      .catch(error => {
        // 触发失败action，更新状态
        dispatch({type: UPDATE_VALUE_ROUTING_FAILURE, error, isLoaded: true});
        console.error("Failed to update routing values:", error);
        // 重新抛出错误，让调用者的catch可以捕获
        return Promise.reject(error);
      });
  };
}

关键要点说明 #

• 错误处理的必要性：添加catch块后，无论请求成功还是失败，都能正确更新Redux状态，同时把错误传递给调用者，避免静默错误。
• Promise的自动传递：Thunk中间件会自动返回你在函数中返回的Promise，所以组件中可以直接对dispatch(updateValuesRouting(...))进行.then()和.catch()调用。
• 状态一致性：确保在请求的三个阶段（开始、成功、失败）都正确更新isLoaded，避免UI出现异常状态。

组件中调用示例 #

在React组件中，你可以这样使用这个action creator，实现请求完成后的后续操作：

// 假设在组件的事件处理函数中
handleUpdate = () => {
  const { dispatch } = this.props;
  dispatch(updateValuesRouting(formValues, routingId))
    .then(returnedData => {
      alert("更新成功！");
      // 比如刷新页面数据或者跳转到其他页面
      this.fetchRoutingData();
    })
    .catch(error => {
      alert(`更新失败：${error.message}`);
    });
};

常见误区提醒 #

• 不要忘记返回axios的Promise：如果你的Thunk函数没有返回这个Promise，组件中调用dispatch(...)后无法链式调用.then()，因为返回的是undefined。
• 错误处理中要重新抛出错误：如果你在catch里不返回Promise.reject(error)，调用者的.catch()不会触发，错误会被“吞掉”，难以排查。
• 加载状态要覆盖所有分支：确保成功和失败时都把isLoaded设为true，避免用户一直看到加载动画。

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