Я работаю над проектом, в котором для разработки используются 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)));
}
}
Я также проверил другие сообщения в стеке потока, но многие публикации предлагают другое промежуточное ПО, и дополнительная зависимость требует одобрения, поскольку одним из требований является ограниченная пропускная способность, используйте минимальные зависимости по мере необходимости.