sagaが親で完了するまで子コンポーネントのレンダリングを延期するReactコンポーネント

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がトリガーされます。それは、サガによって処理されます。これは、APIからいくつかのデータを取り出し、ペイロード付き別のアクションreceiveApplesApiDataを返します。ペイロードは、レデューサーによって還元状態に追加されます。

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の拡張子w）はクロムのdevのツールでそれを点検するとき

Reduxの状態は、細かい更新されますが、私はReduxの状態は（最近フェッチ「りんご」と）時間内に更新されていないことに気づきましたコンポーネント2では競合状態が獲得されていましたが、これは、コンポーネント2がレンダリング機能の時点では存在しなかったため、「リンゴ」を表示できないことを意味します。

再レンダリングは通常ネストされたツリー構造の場合は自動的に行われますが、「リンゴ」はレデックスストアの独自のルートオブジェクトに配置されます。

どのようにしてアプリケーションが必要なデータを取得するのをComponent1とComponent2が待機するようにすることができますか。言い換えれば、データが還元されるまで、どのようにAppでレンダリング機能を遅延/遅延させることができますか？

Answer 1

つのオプション：

• 条件付き値が再来店

富栄で更新される前に特定の値が格納

ディスプレイ何か仲介に存在しているかどうかに基づいてコンポーネントをレンダリングここでの主な問題のように聞こえますが、コンポーネントをストアの変更に基づいて更新するようになっています。

一般的なパスは、そのコンポーネントのいずれかが更新されたときにコンポーネントが更新されることです。サガが完了すると、reduxストアの値が更新されます。コンポーネントには、ストアを監視し、ストアからその小道具を更新するものが必要です。これはReactにこれらのコンポーネントを再レンダリングするように指示するものです。一般的なコンベンションでは、これらすべての更新をmapStateToProps関数に格納することです。

あなたの例はかなり剥ぎ取らので、私は確信してどのようにあなたが使用しているReduxの機能が組み込まれてのあまりないんだけど、ここにあなたのcompnentに更新小道具を渡す方法について説明しますドキュメントですされていますhttps://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

要約：コンポーネントをconnect()でストアに接続し、最初のパラメータはコンポーネントがストアからその小道具をどのように更新するかを指定する関数である必要があります。