如何在Redux异步函数中通过Promise正确返回数据？

问题出在你的异步版userSignupRequest里，你的thunk函数没有返回整个Promise链。原同步代码中，thunk函数直接return了同步值，所以调用者能拿到结果；但异步场景下，Auth.signUp是Promise异步操作，你在then/catch里的return只是给Promise内部的链返回值，而thunk函数本身没有把这个Promise返回出去，导致调用该函数时最终得到undefined。

修复步骤： #

• 让thunk函数返回整个Promise链：这样调用者（通常是dispatch调用这个action creator后）就能拿到Promise，进而通过.then()和.catch()获取结果或错误。
• 在catch里抛出错误而非返回：如果只是return Error对象，Promise会被标记为resolved状态，调用者的.catch()无法捕获到错误，应该用throw来触发Promise的reject状态。

修复后的代码： #

export function userSignupRequest(username, password) {
  // 这里return整个Auth.signUp的Promise链
  return (dispatch) => {
    return Auth.signUp({ username, password })
      .then(data => {
        console.log(data);
        dispatch(setLoginSuccess(true));
        return data; // 这个return会传递给后续的then
      })
      .catch(err => {
        console.log(err);
        // 抛出错误，让Promise进入reject状态
        throw new Error(err.message);
      });
  };
}

调用方式示例： #

当你在组件里调用这个action creator时，需要通过dispatch执行，然后可以链式处理结果：

dispatch(userSignupRequest('test@example.com', 'password123'))
  .then(userData => {
    // 处理成功后的用户数据
    console.log('注册成功', userData);
  })
  .catch(error => {
    // 处理错误信息
    console.error('注册失败', error.message);
  });

为什么这样有效？ #

Redux Thunk中间件允许你的action creator返回一个函数（也就是thunk），当这个thunk函数执行时，如果它返回一个Promise，dispatch会把这个Promise返回给调用者，这样你就能在调用处处理异步操作的结果了。

内容的提问来源于stack exchange，提问作者Skate to Eat