React Native中Redux-thunk异步分发问题：payload为Promise对象

你的问题核心在于：你直接把loginFunc返回的Promise作为action的payload传递了，但Redux默认只会同步处理普通对象类型的action，不会等待Promise完成后再传递结果给reducer，所以reducer里拿到的自然是未完成的Promise或者异常对象，而不是你期望的最终返回值。

因为你已经配置了redux-thunk，我们可以利用它的特性——允许dispatch一个函数（而非仅仅是普通对象）——来处理异步逻辑，等Promise resolve后再分发真正的action。下面是两种正确的写法：

方法1：使用async/await（更直观） #

const mapDispatchToProps = dispatch => {
  return {
    login: (state, navigator) => {
      // 返回一个thunk函数，redux-thunk会自动注入dispatch参数
      return async (dispatch) => {
        try {
          // 等待loginFunc的Promise完成，拿到最终结果
          const loginResult = await loginFunc(state, navigator);
          // 分发携带正确payload的action
          dispatch({ type: "USER", payload: loginResult });
        } catch (error) {
          // 可选：处理登录失败的情况，分发错误action
          dispatch({ type: "USER_LOGIN_FAILED", payload: error });
        }
      };
    }
  };
};

方法2：使用Promise的.then/.catch（兼容旧环境） #

如果你项目还不支持async/await，可以用传统的Promise链式调用：

const mapDispatchToProps = dispatch => {
  return {
    login: (state, navigator) => {
      return () => {
        loginFunc(state, navigator)
          .then(loginResult => {
            // Promise成功时，分发正确的action
            dispatch({ type: "USER", payload: loginResult });
          })
          .catch(error => {
            // Promise失败时，处理异常
            dispatch({ type: "USER_LOGIN_FAILED", payload: error });
          });
      };
    }
  };
};

为什么原来的写法不行？ #

你之前的代码直接把loginFunc(state, navigator)（一个Promise）作为payload放进action对象里，Redux会立刻把这个action传递给reducer，完全不会等待Promise resolve。所以reducer拿到的payload是Promise实例本身，而不是它最终resolve的结果。

redux-thunk的作用就是让我们可以在dispatch中嵌入异步逻辑：它会拦截那些是函数的"action"，先执行这个函数（并传入dispatch等参数），等异步操作完成后，再由我们手动分发真正的普通对象action，这样reducer就能拿到正确的结果了。

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