Загрузка страницы и зависимость состояния между различными компонентами

Question

Я создаю приложение, используя React-Redux + React Router.Итак, если пользователь вводит https://my -website.com / team , я хочу представить ему страницу «Команды».

Предположим, что мое приложение состоит из 2 компонентов: Header и TeamsScreen.Мне нужно загрузить данные пользователя для отображения заголовка.Мне нужно загрузить данные пользователя и команды для отображения TeamsScreen.

Как правильно добиться этого в соответствии с передовой практикой?

Что я уже сделал:

1) Введен новый компонент, назовем его AuthenticatedUser

render() {
    if(!this.props.userData)
       return (
           <Loader/>
       );

    return (
      <div>
        <Header userData={this.props.userData}/>
        <TeamsScreen userData={this.props.userData}/>
      </div>
    );
}

, который загружает пользовательские данные в componentDidMount.Если пользовательские данные являются нулевыми, они отображают загрузчик.Если он не нулевой, он отображает Header и TeamsScreen.

2) Я передаю данные пользователя в качестве свойства для Header.Я передаю данные пользователя в качестве свойства в TeamsScreen.

3) На componentDidMount в TeamsScreen загружаю данные команд.Если данные команд пустые, я отображаю загрузчик для TeamsScreen.В противном случае я отображаю TeamsScreen.

Кажется, работает, но ... В случае медленного интернета и / или медленной базы данных вот как это выглядит:

1) Существует большой загрузчик длявся страница, пока пользовательские данные загружаются.

2) Как только он загружается, я отображаю заголовок, и загрузчик перемещается немного вниз, пока данные команд не загружены, и я могу отобразить TeamsScreen.

У меня неприятное ощущение, что я делаю что-то не так.Пожалуйста, поправьте меня.

Заранее спасибо!Будем благодарны за любые подсказки / ссылки на статьи.

Answer 1

В этом случае вам следует использовать избыточность.Весь код, связанный с извлечением данных с сервера, будет выполнять действия, которые могут сначала запустить прядильщик и, в свою очередь, выполнить другое действие, которое скроет прядильщик и установит ваши данные, как только данные будут возвращены с сервера.