Question

我正在使用React-Redux + React Router构建一个应用程序。因此，如果用户输入https://my-website.com/teams，我想向他展示“团队”页面。

让我们假设我的应用包含2个组件：Header和TeamsScreen。我需要加载用户数据才能显示Header。我需要加载用户数据和团队数据才能显示TeamsScreen。

根据最佳实践，实现此目标的正确方法是什么？

到目前为止我所做的：

1）引入了一个新组件，将其命名为AuthenticatedUser

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

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

将用户数据加载到componentDidMount上。如果用户数据为空，则显示加载程序。如果不为null，则会呈现Header和TeamsScreen。

2）我将用户数据作为属性提供给Header。我将用户数据作为属性提供给TeamsScreen。

3）在TeamsScreen的componentDidMount上，我加载团队数据。如果teams数据为空，则显示TeamsScreen的加载器。否则，我将显示TeamsScreen。

它似乎可以正常工作，但是...如果互联网和/或数据库速度很慢，则如下所示：

1）在加载用户数据时，整个页面都有一个很大的加载器。

2）一旦加载，我就会显示一个标题，加载器会稍微向下移动，直到加载团队数据，然后我才能显示TeamsScreen。

我做错事时感到不自在。请纠正我。

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

Answer 1

在这种情况下，您应该使用redux。与从服务器获取数据有关的所有代码都将在动作中执行，该动作可以首先启动Spinner，然后分派另一个动作，一旦从服务器返回数据，该动作将隐藏Spinner并设置数据。

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

1 个答案: