Redux Thunk异步请求返回undefined？登录后重定向需求遇阻

我懂你的困扰——想用Redux Thunk处理登录的异步逻辑，同时要在组件里根据登录结果做页面重定向，但现在Action没法把结果传回组件对吧？问题出在你的Promise链条没有正确返回可用于判断的状态值，导致组件拿不到登录成功与否的依据。

问题分析 #

你的loginUser Action Creator里，虽然调用了axios.post并处理了响应，但在.then()块里只执行了dispatch操作，没有返回任何可供组件判断的数据。这就导致组件调用loginUser()后拿到的Promise最终会resolve为undefined，自然没法知道登录是否成功。

解决方案 #

我们需要让Action Creator返回的Promise链条最终能传递登录状态（成功/失败）给组件，具体分两步修改：

1. 修改Action Creator，确保返回Promise结果

调整loginUser的代码，在.then()里返回成功标识或用户数据，在.catch()里抛出错误（或者返回错误信息），让组件能捕获到明确的结果：

export function loginUser(email, password) {
  return dispatch => {
    return axios.post('auth/login', { email, password })
      .then(res => {
        if (res.status === 200 && res.data.status === 1) {
          dispatch({ 
            type: AUTH_SUCCESS, 
            payload: res.data.data 
          });
          // 返回成功状态与数据，供组件判断
          return { success: true, data: res.data.data };
        } else {
          // 处理后端返回的业务错误
          dispatch(errorMsg(res.data.msg));
          return { success: false, msg: res.data.msg };
        }
      })
      .catch(err => {
        // 处理请求层面的错误（比如网络错误）
        const errorMsg = err.response?.data?.msg || '登录请求失败';
        dispatch(errorMsg(errorMsg));
        // 抛出错误，让组件的.catch()能捕获到
        throw new Error(errorMsg);
      });
  };
}

2. 在组件中调用Action并处理返回结果

组件里可以用async/await或者.then()来处理loginUser返回的Promise，然后根据结果执行重定向：

// 组件中的登录处理函数（用async/await写法）
const handleLogin = async (email, password) => {
  try {
    const result = await loginUser(email, password)(dispatch);
    if (result.success) {
      // 登录成功，执行重定向
      history.push('/dashboard'); // 若用React Router v6，可改用useNavigate钩子
    }
  } catch (err) {
    // 处理登录失败的情况（比如网络错误）
    console.error(err.message);
  }
};

或者用.then()链式调用写法：

const handleLogin = (email, password) => {
  loginUser(email, password)(dispatch)
    .then(result => {
      if (result.success) {
        history.push('/dashboard');
      }
    })
    .catch(err => {
      console.error(err.message);
    });
};

关键要点 #

• Redux Thunk允许Action Creator返回函数，这个函数里如果返回Promise，组件就能拿到这个Promise的最终结果。
• 一定要在Promise链条的每个分支都返回明确的值（或抛出错误），这样组件才能根据这些值做后续操作。
• 如果你用的是React Router v6，重定向建议使用useNavigate钩子，替代传统的history.push。

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