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

Question

[DoggoTheKing]

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

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

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


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

Answer 1

[Антон Спирин]

Но почему-то, при загрузке компонента 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()}