@DoggoTheKing

Как изменить порядок выполнения actions в Redux?

Есть action loadUser, который получает данные о юзере с REST API с помощью токена(хранится в localStorage) и кладет их в глобальный стейт. Вызывается он в componentDidMount компонента App, который является самым верхним, родителем всех других компонентов, если так можно сказать.

В componentDidMount компонента Artobjects вызывается action getArtObjects. Он, используя данные о юзере из глобального стейта, должен получать картины юзера из REST API.

Но почему-то, при загрузке компонента Artobjects, первым из actions вызывается getArtObjects, а потом уже loadUser. Из-за этого, action getArtObjects не может получить данные о юзера из глобального стейта, тк. появляются они позже.
5c8fda0d672c4435643085.png

Как мне поменять порядок вызова actions?
  • Вопрос задан
  • 261 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Но почему-то, при загрузке компонента Artobjects, первым из actions вызывается getArtObjects, а потом уже loadUser. Из-за этого, action getArtObjects не может получить данные о юзера из глобального стейта, тк. появляются они позже.

Метод componentDidMount вызывается после того как были смонтированы все дочерние компоненты, естественно
componentDidMount компонента Artobjects вызывается раньше. Но даже если было бы наоборот, то не факт, что результат запроса loadUser возвращался бы раньше вызова getArtObjects. Почитайте про асинхронное программирование, вы явно не до конца понимаете фундаментальные основы.

Такие важные для всего приложения данные, как данные пользователя, лучше начинать загружать как можно раньше. И это можно делать до монтирования корневого компонента:
const store = configureStore();

store.dispatch(clientInit());  // тут

const Root = () => (
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
);

А до получения этих данных вы можете показывать прелоадер и монтировать Artobjects только после их получения.
{isInitialDataFetching ? <Preloader /> :  this.renderContent()}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы