reactjs - React/Redux 延迟加载数据

Question

我有一个使用 Redux 作为状态容器的 React 应用程序。

我有一个 REST API，用于将数据加载到应用程序中。一些数据只包含 ID，为了显示 ID 背后的真实内容，我需要从 REST API 获取更多数据。

举个例子:

我获取事件列表。这些事件有发言人和参与者。当我在应用程序中单击一个事件时，它会显示演讲者和一些参与者，但这只是他们的预览。所以并不是所有的都显示出来。要显示一个人及其图像和名字，我需要进行另一个 API 调用。

我的问题是构建代码的最佳方式是什么，所以我只需要为显示的人员调用 API。因此，如果我单击一个事件，我只需要加载参与此事件的人员，也只需加载预览的人员。

我也尝试让我的组件不依赖于 Redux store，而只是普通的 React 组件，这些组件从他们的 props 获取他们的状态。

如果需要，我可以提供更多详细信息。

Answer 1

您可以简单地使用 componentDidMount 加载您的额外数据进行 API 调用并在本地设置状态或在 componentDidMount 中分派(dispatch)一个异步 Action Creator，将事件存储在您的 redux 存储中并检索它。取决于您是想在应用程序的其他部分使用事件详细信息数据，还是仅在该特定 View 中使用，当然还有您的个人偏好。

使用本地状态 ->

class EventDetail extends React.Component {

    constructor() {
        super(props);

        this.state = {
            event: null
        };
    }

    componentDidMount() {

        // Get event id from passed prop
        const id = this.props.eventId;

        // Or using react-router, so you can directly link to the URL 
        // https://reacttraining.com/react-router/web/example/url-params
        const id = this.props.match.params.eventId;

        // Make API call using whatever you are using
        // HTTP GET 'events/${id}' -> Details including persons

        apiCallToGetEventDetailsIncludingPersons(id)
            .then(event => { this.setState({ event: event }); })
            .catch(err => { /* handle error */ } );
    }

    render() {

        // Render result when data is set
        // Possible to show loader when data is not yet retrieved instead of null value

        return this.state.event ? (
            <div>Your view</div>
        ) : null;
    }
}

使用 Redux ->

class EventDetail extends React.Component {

    constructor() {
        super(props);
    }

    componentDidMount() {

        // Get event id from passed prop
        const id = this.props.eventId;

        // Or using react-router, so you can directly link to the URL 
        // https://reacttraining.com/react-router/web/example/url-params
        const id = this.props.match.params.eventId;

        // Fire async action creator
        this.props.getEvent(id);
    }

    render() {

        // Render result when data is set
        // Possible to show loader when data is not yet retrieved instead of null value

        return this.props.event ? (
            <div>Your view</div>
        ) : null;
    }
}

const mapStateToProps = (state) => ({
    event: state.yourReducer.whatYouNameYourStoredEvent
});

const mapDispatchToProps = (dispatch) => ({
    getEvent: (id) => dispatch(getAsyncEventDetailsAction(id))
});

const EventDetailContainer = connect(mapStateToProps, mapDispatchToProps)(EventDetail);