Question

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

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

举个例子：

我获取事件列表。这些活动有演讲者和参与者。当我在应用程序中单击某个事件时，它会显示发言人和一些参与者，但这只是他们的预览。因此，并未全部显示出来。要显示一个带有图像和名称的人，我需要进行另一个API调用。

我的问题是构造代码的最佳方法是什么，因此我只需要为显示的人员调用API。因此，如果我单击一个事件，则只需要加载此事件中涉及的人员，也只需加载预览的人员。

我还尝试使我的组件不依赖Redux商店，而只是从其props获取状态的普通React组件。

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

Answer 1

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

使用本地状态->

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);

React / Redux延迟加载数据

1 个答案: