Как правильно отправить одно и то же действие дважды в одном компоненте React

Question

Я пытаюсь понять наилучший подход к проблеме извлечения данных, с которой я сталкиваюсь с избыточностью в моем приложении реакции.

Короче говоря, мне нужно отправить одну и ту же выборку (в данном случае fetchPlayerSeasonStats) дважды и сохранить обе выборки данных. Первая выборка захватывает статистику для одного игрока (через выборочный 1-й параметр thisPlayerId), а 2-ая выборка пропускает параметр и выбирает намного больший набор данных.

Ниже я попытался сделать следующее:

(а) получить playerSeasonStats в первый раз

(b) в componentDidUpdate(), проверьте, что первая выборка была завершена (if условие проверки массива legnths).

(c) если условие выполнено, используйте переменную состояния thisPlayersSeasonStats для хранения исходной выборки данных.

(d) затем еще раз отправьте больший набор данных с другим отправленным действием.

... кроме того предупреждения, которое я получаю со словами «не обновлять состояние в componentDidMount», в общем, я не уверен, что этот подход правильный или это «анти-паттерн» / плохой React / Redux стиль кодирования. Я хотел бы убедиться, что я делаю это правильно, поэтому любая проверка кода ниже (в частности, функция componentDidUpdate()) будет принята с благодарностью!

Спасибо!

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

// Import Fetches
import { fetchPlayerSeasonStats } from '../../../actions/...';

// Create The Component
class MyComponentHere extends Component {
    constructor(props) {
        super(props);
        this.state = {
            thisPlayerSeasonStats: []
        };
    }

    componentDidMount() {
        let thisPlayerId = this.props.playerInfo._id;
        this.props.dispatch(fetchPlayerSeasonStats(thisPlayerId, this.props.appSeason.value));
    }

    componentDidUpdate(prevProps) {
        console.log('prevProps: ', prevProps);
        if (this.props.appSeason !== prevProps.appSeason) { this.refetchTeamsStats(); }
        if (prevProps.playerSeasonStats.length === 0 && this.props.playerSeasonStats.length === 1) {
            this.setState({ thisPlayerSeasonStats: this.props.playerSeasonStats });
            this.props.dispatch(fetchPlayerSeasonStats(null, this.props.appSeason.value));
        }
    }

    render() {
        // Handle Initial Loading Of Data
        if (this.state.thisPlayerSeasonStats.length === 0) { return <LoadingSpinner />; }

        // The Return
        return (
            <div> Return Dont Matter For here </div>
        );
    }
}

function mapStateToProps(reduxState) {
    return {
        playerSeasonStats: reduxState.playerSeasonStatsReducer.sportsData,
        loading: (reduxState.playerSeasonStatsReducer.loading),
        error1: reduxState.playerSeasonStatsReducer.error
    };
}

export default connect(mapStateToProps)(MyComponentHere);

Answer 1

Ответ прост.

Давайте посмотрим, как работает redux-thunk .

Промежуточное ПО Redux Thunk позволяет писать создателям действий, которые возвращают функцию вместо действия

Я думаю, что именно это и делает fetchPlayerSeasonStats. Возвращает некоторую асинхронную функцию, которая выбирает игроков. Redux-thunk помогает отправлять его (я думаю, что вы используете Redux-thunk. В случае, если вы используете какое-то другое асинхронное промежуточное программное обеспечение, оно должно работать по существу так же).

Таким образом, мы можем написать создатель действий, который будет возвращать функцию (как fetchPlayerSeasonStats), но внутри будет отправлять не действия, а другую функцию. Так что у нас будет функция диспетчеризации, которая будет отправлять действие: -)

Например

fetchAllPlayerStats (thisPlayerId, appSeasonValue) => dispatch => {
    dispatch(fetchPlayerSeasonStats(thisPlayerId, appSeasonValue));
    dispatch(fetchPlayerSeasonStats(null, appSeasonValue));
}

Затем вы можете использовать this.props.dispatch(fetchAllPlayerStats(thisPlayerId, this.props.appSeason.value)) из componentWillMount для извлечения всех данных одновременно.

Совет. Текущая реализация fetchAllPlayerStats получит все данные одновременно. Если вы добавите ключевые слова async / await, вы получите сначала данные для одного игрока, а затем больший набор данных. Модифицированная версия будет выглядеть как

fetchAllPlayerStats (thisPlayerId, appSeasonValue) => async dispatch => {
    await dispatch(fetchPlayerSeasonStats(thisPlayerId, appSeasonValue));
    await dispatch(fetchPlayerSeasonStats(null, appSeasonValue));
}

Вот простой пример для демонстрации логики