使用Redux Thunk结合async/await时异步代码未执行问题求助

嘿，我来帮你排查这个问题！作为Redux新手，你遇到的async函数不执行的问题其实很常见——核心原因是Redux默认只支持返回普通对象的同步action creator，而你写的signIn返回了一个异步函数，Redux根本不知道该怎么处理它，必须借助redux-thunk中间件才能让这个函数被调用执行。

第一步：确认并配置redux-thunk中间件 #

这是让你的异步action生效的关键：

1. 先安装依赖：

   npm install redux-thunk
   # 或者用yarn
   yarn add redux-thunk
   

2. 在创建Redux Store的时候，把thunk中间件添加进去：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './path/to/your/rootReducer';
   
   const store = createStore(
     rootReducer,
     applyMiddleware(thunk) // 必须加这一行，让Redux能处理返回函数的action creator
   );
   
   export default store;
   

第二步：修正你的action写法 #

另外，你的代码里还有一个小问题：直接return error不会让Redux状态更新，应该通过dispatch触发对应的错误action，组件才能感知到验证失败或请求错误。修正后的代码示例：

export function signIn(email, password) {
  console.log('trying to login');
  return async function (dispatch) {
    const error = validateCredentials(email, password);
    if (error) {
      // 用dispatch触发错误action，而不是直接return error
      return dispatch({ 
        type: 'SIGN_IN_VALIDATION_ERROR', 
        payload: error 
      });
    }
    try {
      console.log('gather credentials');
      // 补全你的geo请求逻辑，比如用fetch或axios
      const geoipjson = await fetch('/api/geoip').then(res => res.json());
      
      // 发起登录请求
      const loginRes = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password, location: geoipjson })
      });

      if (!loginRes.ok) {
        throw new Error('登录请求失败');
      }

      const userData = await loginRes.json();
      // 触发登录成功的action
      dispatch({ 
        type: 'SIGN_IN_SUCCESS', 
        payload: userData 
      });
    } catch (err) {
      // 捕获请求错误，触发错误action
      dispatch({ 
        type: 'SIGN_IN_REQUEST_ERROR', 
        payload: err.message 
      });
    }
  };
}

关键说明 #

• 为什么原来的async函数没运行？如果没有redux-thunk，Redux会直接忽略你返回的这个异步函数，根本不会调用它，所以里面的console.log('gather credentials')和await逻辑都不会执行。
• 组件里调用这个action的时候，要通过dispatch：比如dispatch(signIn(email, password))，这样thunk中间件才会接手执行你返回的async函数。

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