Всем доброго времени суток. Я пишу небольшое приложение на react/redux и axios, в котором выполняю get запрос на получение списка фильмов. Я пытаюсь сделать инициализацию при загрузке сайта, и рендерить компоненты только после успешного ответа от сервера.
Для этого в store есть состояние isApplicationReady, от которого зависит, отрендерится приложение или нет. isApplicationReady по умолчанию false, а при загрузке фильмов должно меняться на true.
Запрос выглядит так:
export const loadFilms = (page) => (dispatch, _getState, api) => {
api.get(`list_movies.json?limit=15&page=${page}`)
.then(({data}) => {
dispatch(ActionCreator.loadFilms(data.data.movies));
})
.catch((err) => {
alert(`Что-то пошло не так: ` + err);
throw err;
})
}
Функция инициализации, она отрабатывает при загрузке сайта:
export const init = () => (dispatch) => {
Promise.all([
dispatch(loadFilms()),
])
.then(() => {
dispatch(ActionCreator.enableApplication(true));
})
.catch((err) => {
dispatch(ActionCreator.enableApplication(false));
alert(`Что-то пошло не так2: ` + err);
throw err;
})
}
Здесь возникает проблема, при выполнении
dispatch(loadFilms())
в Promise.all, он посылает запрос серверу, но не дожидается ответа и сразу идет к блоку .then(), isApplicationReady меняется на true, компоненты рендерятся, но фильмы все еще не пришли с сервера.
Итоговая последовательность:
false // Первичное состояние isApplicationReady
startRequest // Запрос ушел на сервер
true // Promise.all выполнился, перешел к блоку .then() и поменял isApplicationReady на true
[ ] // Компоненты рендерятся, но текущее значение films в store - пустой массив
// На текущем моменте вылетает ошибка, т.к. фильмы отсутствуют и сайт падает, если убрать все данные, то:
{status: "ok" , ..., ...} // Пришел ответ от сервера
[{...}, {...}, ...] //Данные фильмов в store обновились
Собственно, сам вопрос: как дождаться ответа от сервера при выполнении dispatch в Promise.all, и только после этого выполнять блок .then()?
Спасибо за помощь.