页面加载和不同组件之间的依赖性状态

Question

我建立使用反应 - 终极版+阵营路由器的应用程序。因此，如果用户输入https://my-website.com/teams，我想现在他的团队页面。

让我们假设我的应用程序由2个部分组成：页眉和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用户数据。如果用户数据为空，则显示加载程序。如果它不为空，它呈现页眉和TeamsScreen。

2）I给用户数据作为属性，以报头。我给用户数据属性TeamsScreen。

3）在componentDidMount在TeamsScreen我加载队的数据。如果球队的数据是空的，我显示TeamsScreen装载机。否则，我显示TeamsScreen。

这似乎工作，但......在缓慢的互联网和/或在这里慢数据库的情况下是如何的样子：

1）没有为整页大装载机，而用户数据被加载。

2）只要它被加载时，我显示标题和装载机被移动的位下来，直到球队数据被加载并我可以显示TeamsScreen。

我有我做错了什么不舒服的感觉。请指正。

先感谢您！任何提示/文章链接将不胜感激。

Answer 1

在这种情况下，你应该使用终极版。来从服务器的数据相关的所有代码将在其中可先启动微调，并反过来调度其他动作，这将隐藏微调和设置您的数据，一旦数据从服务器返回的行动。