Показывать страницу загрузки при получении данных - React Redux

Question

У меня есть 2 части страницы, слева находится коллекция идентификаторов, а во второй части отображаются данные.

Первый раз, когда страница загружает все данные (всех идентификаторов) ) отображается. Но пользователь может выбрать только 1 идентификатор и увидеть данные этого конкретного идентификатора, но для извлечения данных требуется время. Таким образом, между моментом щелчка по идентификатору и отображением данных - на странице отображаются предыдущие данные (что довольно сложно), и данные внезапно меняются после завершения выборки. Я хочу показать страницу загрузки, когда по идентификатору нажимают, пока не появятся данные.

Как это сделать.

При выборе значения 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.

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

Например

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