React Redux中API响应无法返回至Action Creator的问题求助

我帮你拆解下当前代码里的核心问题，然后给出针对性的修复方案：

1. API方法存在未处理的Promise分支 #

你的getLeaguesGamesAPI中，当game.error存在时，对应的then块没有返回任何值，这会导致该Promise的resolve值为undefined；同时如果请求出错，也没有统一的返回逻辑，会让Promise.all后续处理拿到无效数据。

2. Action Creator未接收Promise.all的结果 #

你在Promise.all().then(() => { ... })里没有接收参数，自然拿不到API返回的响应数据。

3. 未正确生成并dispatch Redux Action #

你的loadLeag_Game_Success函数没有返回标准的Redux Action对象（缺少type和payload），而且也没在Promise回调里调用dispatch触发这个Action。

修改后的完整代码 #

首先修正API文件

export default class FootballApi {
  static getAllLeags() {
    return fetch('https://apifootball.com/api/?APIkey=42f53c25607596901bc6726d6d83c3ebf7376068ff89181d25a1bba477149480&action=get_leagues')
      .then(response => response.json())
      .catch(error => {
        console.error('获取联赛列表失败:', error);
        throw error; // 抛出错误让上层catch处理，而非直接返回错误
      });
  }

  static getLeaguesGamesAPI(idArr, date){
    return idArr.map((id)=>{
      return fetch(`https://apifootball.com/api/?APIkey=42f53c25607596901bc6726d6d83c3ebf7376068ff89181d25a1bba477149480&action=get_events&from=${date}&to=${date}&league_id=${id}`)
        .then(res => res.json())
        .then((game) => {
          if(!game.error){
            return game;
          } else {
            console.warn(`获取联赛${id}赛事失败:`, game.error);
            return []; // 统一返回空数组，避免Promise出现undefined
          }
        })
        .catch(error => {
          console.error(`请求联赛${id}接口失败:`, error);
          return []; // 出错时也返回空数组，保证每个Promise都有有效返回
        })
    })
  }
};

然后修正Action Creator文件

import * as types from './actionTypes';
import FootballApi from '../api/footballApi';

// 确保Action Type定义正确（建议和actionTypes.js内的定义保持一致）
export const LOAD_LEAG_GAMES_SUCCESS = 'LEAGUE_GAMES_SUCCESS';

// 修正Action Creator，返回标准的Redux Action对象
export function loadLeag_Game_Success(data){
  return {
    type: LOAD_LEAG_GAMES_SUCCESS,
    payload: data // 将响应数据作为payload传递给Reducer
  };
};

export function getLeaguesGames(idArr, date) {
  return function(dispatch) {
    // 接收Promise.all返回的所有结果
    Promise.all(FootballApi.getLeaguesGamesAPI(idArr, date))
      .then((allGames) => {
        // 合并所有有效赛事数据，过滤空数组和无效项
        const mergedGames = allGames.flat().filter(game => game);
        console.log('返回的赛事数据:', mergedGames);
        // 触发Action，将数据更新到Redux Store
        dispatch(loadLeag_Game_Success(mergedGames));
      })
      .catch(error => {
        console.error('获取赛事数据失败:', error);
        // 这里可以扩展添加错误处理的Action，比如dispatch LOAD_LEAG_GAMES_FAILURE
      });
  };
}

关键修改点说明 #

• API部分：给所有Promise分支添加明确返回值，出错时返回空数组而非undefined，保证Promise.all能拿到统一格式的结果。
• Action Creator部分：
  1. 让loadLeag_Game_Success返回包含type和payload的标准Redux Action。
  2. 在Promise.all().then()中接收allGames参数，拿到所有API返回的响应数据。
  3. 合并过滤数据后，调用dispatch触发Action，把数据传递给Reducer更新Store。

这样修改后，你就能在Action Creator中拿到API的响应结果，并成功将数据同步到Redux Store中了。

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