В React / Redux, как вызвать один и тот же выбор дважды в componentDidMount, установив 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() и gamesReducer, вызывалось дважды, когда компонент монтируется. Это действие / редуктор захватывает некоторые спортивные данные, и я пытаюсь получить данные за два отдельных сезона (сезон «1617» и сезон «1718»). fetchGames() построен правильно для обработки параметра сезона.

При текущей настройке состояния не устанавливаются, и мой мусор выдает ошибку Do not use setState in componentDidMount.

Могу ли я передать обратный вызов this.props.dispatch, который принимает результаты fetchGames() (команда teamGameData) и устанавливает состояния oldGames / newGames, равные этому объекту?

Любая помощь с этим приветствуется!

Редактировать: если я просто удаляю this.setState (), то моя teamGameData опора просто переопределяется со вторым this.props.dispatch() вызовом ...

Редактировать 2: Я не уверен на 100%, является ли наилучшим подходом наличие двух переменных состояния (oldGames, newGames). Мне просто нужно вызвать this.props.dispatch (fetchGames ('seasonid')) дважды при загрузке компонента и получить результаты в виде двух отдельных объектов, которые может использовать остальная часть компонента.

Редактировать 3: у меня есть следующая часть моего действия:

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

и следующий случай в моем редукторе:

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" }

но я не уверен, как использовать идентификатор сезона, чтобы создать ключ для возврата с данными этого сезона ....

Редактировать 4: найдено решение для редактирования 3 - Использовать переменную в качестве ключа объекта в редукторе - спасибо всем за помощь по этому вопросу, должен иметь возможность взять ее отсюда!

Answer 1

Копирование данных из хранилища резервных копий в состояние компонента является антишаблоном

Вместо этого вам следует изменить свое хранилище резервов, например, используя объект для хранения данных, чтобы выВы сможете хранить данные за несколько сезонов:

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],
};

Или подключите магазин как обычно и найдите ключи:

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

Redux - это ваш единственный источник правды , всегда находите способ поставитьвсе, что нужно в Redux вместо копирования данных в компоненты