Question

我正在尝试了解应对React应用中的redux所面临的数据获取挑战的最佳方法。

简而言之，我需要分派两次相同的提取（在这种情况下为fetchPlayerSeasonStats），并保存两次数据提取。第一次提取获取单个玩家的统计信息（通过提取可选的第一参数thisPlayerId），而第二次提取则忽略该参数并获取更大的数据集。

下面我尝试做的是：

（a）第一次获取playerSeasonStats

（b）在componentDidUpdate()中，检查是否已完成第一次提取（if条件检查数组的长度）。

（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的当前实现将一次获取所有数据。如果添加异步/等待关键字，您将首先获取单个播放器的数据，然后获取更大的数据集。修改后的版本看起来像

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

example很简单，可以展示逻辑

如何在单个React组件中两次正确分派相同的动作

1 个答案: