Redux异步Action无法正常工作，疑mapDispatchToProps存在问题

先看你这段mapDispatchToProps代码里的几个关键问题：

1. XMLHttpRequest 根本没发送请求 #

你创建了XHR对象并调用了open()，但完全没调用xhr.send()——这就像你打开了浏览器地址栏输入了网址，却没点回车，请求自然发不出去，Promise也会一直处于pending状态。

2. Promise 未正确处理结果与错误 #

你的xhr.onload回调里只打印了半截日志，既没解析响应数据，也没调用resolve()来完成Promise；同时也没处理请求失败的场景（比如网络错误、状态码非200的情况），这会让异步逻辑彻底“卡住”。

3. Redux 默认不支持异步 Action Payload #

就算你修复了前两个问题，直接把Promise作为action的payload传给dispatch也没用——Redux的dispatch默认只接受普通JavaScript对象作为action。要处理异步逻辑，你得用redux-thunk这类中间件，它允许你dispatch一个函数，在函数内部完成异步操作后再dispatch真正的action。

修复后的代码示例 #

第一步：先配置redux-thunk（如果还没弄） #

如果没安装，先执行：

npm install redux-thunk

然后在创建store时应用这个中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

第二步：修复mapDispatchToProps #

这里用更简洁的fetch替代XMLHttpRequest：

const mapDispatchToProps = (dispatch) => {
  return {
    fetchUserList: () => {
      console.log('---In fetchUserList---');
      // 借助thunk，我们可以dispatch一个异步函数
      return dispatch(async (dispatch) => {
        try {
          const response = await fetch('http://localhost:5000/data/fetch/users');
          if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
          const userList = await response.json();
          dispatch({ type: FETCH_USER_LIST, payload: userList });
        } catch (error) {
          console.error('获取用户列表失败:', error);
          // 建议这里dispatch一个失败状态的action，方便reducer处理错误
          // dispatch({ type: FETCH_USER_LIST_FAILED, payload: error.message });
        }
      });
    }
  };
};

如果你坚持要用XMLHttpRequest，修复后的版本是这样：

const mapDispatchToProps = (dispatch) => {
  return {
    fetchUserList: () => {
      console.log('---In fetchUserList---');
      return dispatch((dispatch) => {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          console.log('xhr: ', xhr);
          xhr.open('GET', 'http://localhost:5000/data/fetch/users');
          xhr.onload = () => {
            console.log('---请求完成---');
            if (xhr.status >= 200 && xhr.status < 300) {
              const userList = JSON.parse(xhr.responseText);
              dispatch({ type: FETCH_USER_LIST, payload: userList });
              resolve(userList);
            } else {
              reject(new Error(`请求错误，状态码：${xhr.status}`));
            }
          };
          xhr.onerror = () => {
            reject(new Error('网络请求失败'));
          };
          // 必须调用send()才会发送请求！
          xhr.send();
        }).catch(error => {
          console.error('获取用户列表失败:', error);
          // dispatch失败状态的action
          // dispatch({ type: FETCH_USER_LIST_FAILED, payload: error.message });
        });
      });
    }
  };
};

额外小建议 #

• 优先用fetch或Axios这类现代HTTP库，比XMLHttpRequest更简洁易维护。
• 异步Action最好拆分出「请求开始、请求成功、请求失败」三种状态的action，这样你的reducer能更好地处理加载状态、展示错误信息，提升用户体验。

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