Как синхронизировать метод выборки в редуксе

Question

Мне интересно, как я могу синхронизировать свой метод выборки. Я хочу предотвратить рендеринг данных в компоненте до возвращения ответа.

Вот мое редукционное действие с моим методом извлечения:

    export const FETCH_DATA_START = 'FETCH_DATA_START'
    export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
    export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'

    export const getData = () => {
        return (dispatch) => {
            dispatch({
                type: FETCH_DATA_START
            })
            fetch(baseUrl, {
                    credentials: "include",
                    method: "GET",
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                })
                .then(res => res.json())
                .then((res) => {
                    dispatch({
                        type: FETCH_DATA_SUCCESS,
                        payload: res
                    })
                })
                .catch((err) => {
                    console.log(err)
                    dispatch({
                        type: FETCH_DATA_FAILED,
                        payload: 'error'
                    })
                })
        }

}

Answer 1

Обычной практикой в ​​этом случае является установка флага типа isFetching в значение true, а затем отображение загрузочного счетчика в вашем JSX в зависимости от состояния этого флага.

Затем, когда вы получили данные, вы прячете этот счетчик и отображаете данные.