javascript - 在 React/Redux 中，如何在 componentDidMount 中调用相同的 fetch 两次，并使用结果设置 2 个状态变量

Question

标题很罗嗦，但是一个简短/简单的例子将有助于解释我的问题。我对组件进行了以下启动:

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchGames } from '../../path-to-action';

class TeamsApp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            oldGames: [],
            newGames: []
        };
    }

    componentDidMount() {
        this.props.dispatch(fetchGames('1617'));
        this.setState({ oldGames: this.props.teamGameData });
        this.props.dispatch(fetchGames('1718'));
        this.setState({ newGames: this.props.teamGameData });
    }

    ...
    ...
}

function mapStateToProps(reduxState) {
    return {
        teamGameData: reduxState.GamesReducer.sportsData
    };
}

export default connect(mapStateToProps)(TeamsApp);

我想要与 fetchGames() 对应的操作/ reducer 和gamesReducer当组件安装时被调用两次。这个 Action / reducer 获取一些体育数据，我正在尝试获取两个不同赛季(“1617”赛季和“1718”赛季)的数据。 fetchGames()已正确构建以处理季节参数。

在当前设置中，未设置状态，并且我的 linter 抛出错误 Do not use setState in componentDidMount .

我可以将回调传递给 this.props.dispatch 来获取 fetchGames() 的结果吗？ (teamGameData 属性)，并将 oldGames/newGames 状态设置为等于该对象？

如有任何帮助，我们将不胜感激!

编辑:如果我只是删除 this.setState()，那么我的 teamGameData prop 只是被第二个 this.props.dispatch() 覆盖打电话...

编辑 2:我完全不能 100% 确定拥有 2 个状态变量(oldGames、newGames)是否是最好的方法。我只需要在组件加载时调用 this.props.dispatch(fetchGames('seasonid')) 两次，并将结果作为组件其余部分可以使用的两个单独的对象。

编辑3:我的操作有以下部分:

export const fetchSportsDataSuccess = (sportsData, season) => ({
    type: FETCH_NBA_TEAM_GAME_SUCCESS,
    payload: { sportsData, season }
});

以及我的 reducer 中的以下情况:

case FETCH_NBA_TEAM_GAME_SUCCESS:
console.log('payload', action.payload);
return {
    ...state,
    loading: false,
    sportsData: action.payload.sportsData
};

console.log() 现在看起来像这样:

payload
{ sportsData: Array(2624), season: "1718" }

但我不知道如何使用季节 ID 在包含本季节数据的返回中创建键......

编辑 4:找到编辑 3 的解决方案 - Use a variable as an object key in reducer - 感谢大家对此的帮助，应该可以从这里获取!

Answer 1

将数据从 redux 存储复制到组件状态是一种反模式

相反，您应该修改您的 redux 存储，例如使用对象来存储数据，这样您就可以存储多个季节的数据:

sportsData: {
    '1617': { ... },
    '1718': { ... },
}

这样您就可以同时获取两个季节:

 componentDidMount() {
    const seasons = ['1718', '1617'];
    const promises = seasons.map(fetchGames);
    Promise.all(promises).catch(…);
}

并将它们连接起来:

// you can use props here too
const mapStateToProps = (reduxState, props) => ({
    // hardcoded like you did
    oldGames: reduxState.GamesReducer.sportsData['1617'],
    // or using some props value, why not
    newGames: reduxState.GamesReducer.sportsData[props.newSeason],
};

或者照常连接商店并获取 key :

const mapStateToProps = (reduxState, props) => ({
    games: reduxState.GamesReducer.sportsData,
};
…
render() {
  const oldGame = this.props.games[1718];
  const newGame = this.props.games[1718];
  …
}

Redux 是您的单一事实来源，始终找到一种方法将您需要的所有内容放入 Redux，而不是在组件中复制数据