Question

我有2部分页面，左侧是Ids的集合，第二部分显示了数据。

页面第一次加载所有ID的所有数据时）被展示。但是用户只能选择1个ID，并且可以看到该特定ID的数据，但需要花费一些时间来获取数据。因此，在单击ID并显示数据的时间之间-该页面显示了先前的数据（相当混乱），并且在获取完成后突然更改了数据。我想在单击ID直到显示数据时显示加载页面。

如何做到这一点。

在ID上执行以下选择，然后将其转到减速器以进行调度动作。

onIdSelection(key, obj) {
        if (key && key.id) {
            this.props.dispatch(actions.fetchDataActionCreator(key.id));
        }
    }

在减速器中：

export const fetchDataActionCreator = (siteId) => {
    return (dispatch) => {
        return dispatch({
            type: START_FETCH_DEVICES,
            payload: api.get({
                url: '/api/ndp/v1/collector/telemetry/sites/' + siteId + '/devices',
                config: {
                    apiPrefix: 'none'
                }
            }).then(payload => dispatch({
                type: FINISH_FETCH_DEVICES,
                meta: {siteId},
                payload})
            )
        });
    };
};

在减速器中：

 case START_FETCH_DEVICES:
            return {...state, dataLoading: true};
 case FINISH_FETCH_DEVICES:
            return {...state, dataLoading: false, payload: action.payload};

在数据方面：

componentWillReceiveProps(nextProps) {
        const {dataUpdated} = nextProps;
        if (dataUpdated) {
            this.props.dispatch(actions.fetchDataActionCreator(this.props.id));
        }
    }

在这里，当我在nextProps中获得数据时-整个数据不在选定的ID上。

如何仅显示“正在加载” div，直到准备好显示数据为止。

Answer 1

您应该将拆分的FetchData操作添加到2个操作中： 1.首先type: START_FETCH_DEVICES 2.第二type: FINISH_FETCH_DEVICES

要安排调度这两个动作，请使用动作创建者。

例如

export const fetchDataActionCreator = (id) => (dispatch) => {
    dispatch ({type: START_FETCH_DEVICES});
    api.get({
        url: '/api/ndp/v1/id/' + id,
        config: {
            apiPrefix: 'none'
        }
    }).then(payload => dispatch({
        type: FINISH_FETCH_DEVICES,
        meta: {id},
        payload})  
    // I'm not sure that api.get can return Promise, but most async fetch api do so
    )
}

现在，您以fetchDataActionCreator作为动作创建者，该函数返回将附加dispatch的函数作为第一个参数。将组件连接到Redux时，请使用bindActionCreators正确包装fetchDataActionCreator。

Reducer应该在状态中设置一些变量，以通知应用程序正在加载数据。

例如

function reducer(state, action) {
    switch (action.type) {
        case START_FETCH_DEVICES:
            return {...state, dataLoading: true}
        case FINISH_FETCH_DEVICES:
            return {...state, dataLoading: false, payload: action.payload}
        default:
            return state;
    }
}

当state.dataLoading为true时，您的组件可以显示“正在加载”消息

提取数据时显示加载页面-React Redux

1 个答案: