Использование response-redux и redux-thunk для индикатора загрузки - PullRequest
1 голос
/ 03 февраля 2020

Я работаю над проектом, в котором для разработки используются response-redux и redux-thunk. Ранее подход состоял в том, чтобы проверять вызовы API по одному и вручную проверять, все ли данные извлекаются. Как я обнаружил, после v7.0 batch вводится в react-redux, чтобы помочь решить проблему. Но для страницы также требуется индикатор загрузки.

В настоящее время используется несколько отправок в пакетном режиме для уменьшения ненужного повторного рендеринга и проверки вручную, все ли данные извлекаются при рендеринге, но мне было интересно, есть другой метод, который можно применить к batch, чтобы сократить проверку жесткого кода.

Вот текущий пример кода:

// in action file
...
function fetchSomeData() {
    // call api to store data
    return dispatch => {
        batch(() => {
            dispatch(fetchData1());
            dispatch(fetchData2());
            dispatch(fetchData3());
            ..some more dispatches...
        });
    }
}
...

// in react component
dataLoaded(){
    ....retrieve all the data from different places... 
    if (!data1)    return false;
    if (!data2)    return false;
    ...check all the data...
    return true;
}

...
render() {
    if (this.dataLoaded()) {
        return actual_content;
    } else {
        return loading_content;
    }
}
...

Я пытался напрямую использовать then и создайте другой метод, верните batch, вызовите fetchSomeData, затем используйте then(), но все выдают ошибку «Cannot read property then» undefined ».

Я также использовал Promise.all , но без удачи. Использование Promise.all показано ниже:

function fetchSomeData() {
    // call api to store data
    return dispatch => {
        Promise.all([
            dispatch(fetchData1());
            dispatch(fetchData2());
            dispatch(fetchData3());
            ..some more dispatches...
        ])
        .then(() => dispatch(setLoading(false)));
    }
}

Я также проверил другие сообщения в стеке потока, но многие публикации предлагают другое промежуточное ПО, и дополнительная зависимость требует одобрения, поскольку одним из требований является ограниченная пропускная способность, используйте минимальные зависимости по мере необходимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...