Question

<Provider store={this.props.store}>
  <ConnectedRouter history={this.props.history}>
    <AppWrap>
      <Header />
      <Main>
        <Switch>
          <Route exact path="/" component={Component1}/>
          <Route path="/component2" component={Component2}/>
        </Switch>
      </Main>
    </AppWrap>
  </ConnectedRouter>
</Provider>

在App.componentWillMount内部，会触发Redux操作this.props.requestApplesApiData。它由一个saga处理，它从api获取一些数据并返回另一个带有有效负载的动作receiveApplesApiData，由reducer添加到redux状态。

componentWillMount(){
  // triggers an action 
  // which is picked up by a saga, 
  // which is handled by the reducer 
  // which updates the redux state
  this.props.requestApplesApiData();
}

Redux状态更新正常，当我在chrome dev工具中检查它时（w.redux扩展名），但我注意到redux状态（最近获取的“apples”）在Component2中没有及时更新，而在组件1中赢得了竞争条件。这意味着，Component2无法显示“apples”，因为它们在渲染功能时不存在。

重新渲染通常会自动发生，如果它位于嵌套树状结构中，但“apples”位于redux存储区中它们自己的根对象中。

如何让Component1和Component2等待App获取必要的数据。或换句话说，如何在App中延迟/推迟渲染功能，直到数据在redux中？

Answer 1

两个选项：

根据商店中是否存在某个值，有条件地渲染组件
在Redux商店中更新值之前显示中介内容

但听起来这里的主要问题是让组件根据商店的变化进行更新。

一般路径是组件会在更新任何道具时更新。一旦saga完成，它将更新redux存储中的一些值。组件应该具有监视商店并从商店更新其道具的东西。这将告诉React重新渲染这些组件。一般惯例是将所有这些更新存储在mapStateToProps函数中。

您的示例相当简单，因此我不确定您使用的内置redux功能有多少，但以下是描述如何将更新的道具传递到您的组件的文档：{ {3}}

文档摘要：使用connect()将组件连接到商店，第一个参数需要是一个函数，指定组件如何从商店更新其道具。

延迟子组件的呈现，直到在父React组件中完成saga

1 个答案: