@jcd77

Как дождаться ответа от сервера при выполнении dispatch в Promise.all, используя axios, redux?

Всем доброго времени суток. Я пишу небольшое приложение на 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()?

Спасибо за помощь.
  • Вопрос задан
  • 429 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы