React Redux中Fetch API与Promise结合的Action Creator Dispatch问题

看起来你在实现API请求时的加载器逻辑，但遇到了dispatch相关的问题。我帮你梳理下常见的坑和修正方案：

首先，先排查几个核心问题点 #

• 你有没有处理API请求失败的情况？如果没加catch块，请求出错时加载器会一直显示，这是最常见的问题。
• 你的Action创建函数是否正确生成了标准的action对象？比如是否包含type字段和正确的payload？
• recd(actionType)是否返回了正确的action type字符串？比如类似FETCH_DATA_SUCCESS这样的类型？

修正后的完整代码示例 #

export const fetchData = (actionType, param) => (dispatch) => {
  // 第一步：显示加载器
  dispatch(Action(ActionConstants.SHOW_PROGRESS_LOADER));

  return fetchDataRequest(actionType, param)
    .then(responseData => {
      // 请求成功：先隐藏加载器，再分发数据action
      dispatch(Action(ActionConstants.HIDE_PROGRESS_LOADER));
      // 确保recd(actionType)返回正确的action type，payload格式符合reducer预期
      dispatch(Action(recd(actionType), { data: responseData }));
      return responseData; // 可选，让调用这个action的地方能拿到返回数据
    })
    .catch(error => {
      // 关键：请求失败也要隐藏加载器！
      dispatch(Action(ActionConstants.HIDE_PROGRESS_LOADER));
      // 额外：分发错误action，方便页面处理错误提示
      dispatch(Action(ActionConstants.FETCH_ERROR, { error: error.message }));
      throw error; // 可选，让调用者可以捕获错误做后续处理
    });
};

几个必须注意的细节 #

1. 错误处理不能少：不管请求成功还是失败，都必须调用HIDE_PROGRESS_LOADER，否则加载器会一直停留在页面上。
2. 确认Action Creator的正确性：你的Action函数应该是这样的标准结构，确保dispatch的action是合法的：

   // 标准的Action创建函数示例
   const Action = (type, payload = {}) => ({
     type,
     ...payload
   });
   

3. 检查Redux中间件配置：如果你用的是redux-thunk（从代码看你应该是用了），要确保store已经正确配置了thunk中间件，否则dispatch无法处理异步函数：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './your-reducer-path';
   
   const store = createStore(rootReducer, applyMiddleware(thunk));
   

4. action type的正确性：recd(actionType)需要返回对应的成功action type，比如如果actionType是FETCH_USER，那recd应该返回FETCH_USER_SUCCESS，否则reducer无法识别这个action。

如果还是有问题，可以检查下reducer里是否正确处理了SHOW_PROGRESS_LOADER和HIDE_PROGRESS_LOADER的action，确保状态能正确更新。

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