如何在Redux Thunk函数中返回字符串并通过dispatch获取返回值

首先明确：Redux Thunk支持从thunk函数返回任意类型的值，包括字符串，你拿不到返回值是代码写法存在三个问题：

• 没有将thunk内部的异步请求Promise链return到外层，dispatch执行后拿到的是默认的undefined
• 异步请求的结果是异步返回的，同步读取dispatch返回值时，请求还没执行完成，自然拿不到回调里return的字符串
• 失败分支、请求异常分支没有做统一的返回值处理，逻辑不完整

正确实现方式 #

第一步：修改thunk函数，返回完整Promise链 #

你需要把jwtAxios.post的调用结果（也就是Promise对象）return出去，同时在所有分支（请求成功、请求失败、接口报错）都返回对应的状态字符串：

export const postData = (data) => {
  return (dispatch) => {
    // 此处必须return Promise，才能让外层拿到异步结果
    return jwtAxios
      .post(`/setdata`, data)
      .then((res) => {
        if (res.status === 200) {
          dispatch({type: FETCH_SUCCESS});
          return 'success'
        } else {
          dispatch({
            type: FETCH_ERROR,
            payload: <IntlMessages id='message.somethingWentWrong' />,
          });
          return 'fail'
        }
      })
      .catch((error) => {
        dispatch({
          type: FETCH_ERROR,
          payload: <IntlMessages id='message.somethingWentWrong' />,
        });
        return 'fail'
      });
  };
};

第二步：调用时通过异步方式获取返回值 #

因为返回结果是Promise包裹的异步值，你需要用await或者.then()的方式读取最终结果：

async/await写法（推荐）

// 注意包裹函数需要加async关键字
const submitData = async (data) => {
  const result = await dispatch(postData(data));
  console.log(result) // 此处可拿到'success'或'fail'
}

Promise then写法

dispatch(postData(data)).then(result => {
  console.log(result) // 此处可拿到'success'或'fail'
})

原理说明：Redux Thunk中间件的核心逻辑是，当你dispatch的是一个thunk函数时，它会直接执行这个函数，并将函数的返回值原样作为dispatch的返回值返回。只要你在thunk中正确return了带结果的Promise，就能在外层拿到最终的状态字符串。

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