如何在Redux Action Dispatch中返回Promise以支持.then链式调用？

看起来你遇到的核心问题是Redux Thunk 异步 Action 没有正确返回 Promise，导致无法链式调用 .then，同时代码里还有几处异步流程的逻辑错误，咱们一步步来修正：

1. 修复异步 Action 的 Promise 返回逻辑 #

你的 fetchHomework 目前没有返回任何有效 Promise（最后两行同步 dispatch 会在请求完成前执行），所以 this.props.retrieveHomework() 调用后拿不到可链式调用的 Promise。我们需要让 Thunk 函数返回完整的 Promise 链，并梳理异步流程：

export const fetchHomework = () => {
  return (dispatch, getState) => {
    // 先触发加载状态
    dispatch(uiStartLoading());
    dispatch(uiStartFetchingHomework());

    // 返回整个 Promise 链，让外部可以链式调用
    return dispatch(authGetToken())
      .catch(err => {
        dispatch(errHandler(err));
        // 重新抛出错误，让外部的 .catch 能捕获到异常
        throw err;
      })
      .then(token => {
        const uid = getState().userid;
        // 返回 fetch 的 Promise，延续异步链
        return fetch(restAPI)
          .then(res => {
            // 检查 HTTP 状态码，避免非 2xx 响应被误判为成功
            if (!res.ok) {
              throw new Error(`请求失败！状态码：${res.status}`);
            }
            return res.json();
          })
          .then(response => {
            dispatch({ type: 'SET_HOMEWORK_FOR_AGENDA', homework: response });
            return response; // 可选：把结果传递给外部的 .then
          })
          .finally(() => {
            // 无论成功失败，最终都停止加载状态
            dispatch(uiStopLoading());
            dispatch(uiStopFetchingHomework());
          })
          .catch(err => {
            dispatch(errHandler(err));
            // 重新抛出错误，让外部能捕获并处理
            throw err;
          });
      });
  };
};

关键改动说明： #

• 让 Thunk 函数返回完整的 Promise 链，确保外部调用时能拿到可链式调用的 Promise
• 移除了最后两行同步执行的停止加载状态代码，改用 finally 保证请求结束后才更新状态
• 在 catch 块中重新抛出错误，确保外部的 .catch 能捕获到异常
• 增加 HTTP 状态码检查，避免将 4xx/5xx 这类错误响应当成成功处理

2. 修正组件中的调用逻辑 #

你之前的组件代码是同步执行的，完全没等异步请求完成就更新状态，这会导致 firebaseItems 拿到的还是旧数据。现在可以利用 Action 返回的 Promise 来实现等待逻辑：

this.setState({ refreshing: true });
this.props.retrieveHomework()
  .then(response => {
    // 请求成功后，再更新状态并加载数据
    this.setState({ 
      refreshing: false, 
      firebaseItems: this.props.homework // 也可以直接用 action 返回的 response，更可靠
    });
    this.loadItems(this.state.selectedDay);
  })
  .catch(err => {
    // 处理错误情况，比如停止刷新状态
    this.setState({ refreshing: false });
    console.error('获取待办事项失败:', err);
  });

关键改动说明： #

• 把依赖异步请求结果的代码放到 .then 块中，确保只有请求完成后才执行
• 增加 .catch 处理错误场景，避免请求失败后刷新状态一直处于 true

3. 额外注意事项 #

• 确保你的 authGetToken Action 也返回了 Promise，否则 dispatch(authGetToken()) 无法链式调用 .then
• Redux 状态更新是异步的，若 this.props.homework 是从 Redux 映射来的，在 .then 里可以直接用 Action 返回的 response 来设置 firebaseItems，这样能避免状态更新延迟的问题

这样修改后，就能实现“调用 retrieveHomework 后等待请求完成，再执行后续代码”的需求了。

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