React：一般的な "データプロバイダ"フィルタから兄弟にデータを渡す最も良い方法

Question

私はReactでAnalyticsウェブページを作成しています。

私は利用可能な異なるページをカプセル化する主なコンポーネントを持っています（1つの概要、次に特定のドリルダウン）。

function Analytics(props) { 
    return (
    <div id="main" className="analytics"> 
     <AnalyticsFilter /> 
     <div id="content"> 
     <div id="contentsub"> 
      {props.children} 
     </div> 
     </div> 
    </div> 
); 
} 

AnalyticsFilter表示されたデータをフィルタリングするための方法である - それはここに含まれているなぜそれが故に、すべてのページに同じです。考えられるのは、データを表示するコンポーネント（props.children）がフィルタから要求すると、複数のコンポーネントが同じデータをさまざまな方法（チャート、表など）で表示する可能性があるため、データを遅延ロードし、トップ10など）。

私の質問：ページ上のコンポーネントとAnalyticsFilterコンポーネント間の通信を円滑にする理想的な方法は何ですか？

フィルタには4つの異なるデータセットがあります（すべて同じフィルタパラメータに基づいています）が、必要でないページについてはすべてを照会する必要はありません（つまり、特定のデータセットについてのみ気にします）。

ような成分は、フィルタパラメータが更新されるときに、特定のデータセットの種類、及び

が自動的に更新さ

1. 要求にできなければならないように。

私はちょうど始まります（そしてかなりReactに新しい）ので、すべてが開いています。ここにあるAnalyticsのコンポーネントは、簡単に書き換えられれば、より多くの機能を組み込むことができます。

Answer 1

私はフラックスfluxのアーキテクチャを見て、反応に完全に合っています。そのアーキテクチャの良い実装はreduxです。

基本的な考え方は、ユーザーがビューに入力するすべてが、ディスパッチャーで処理されストアに保存されるアクションをトリガーすることです。次に、ストアはビュー再レンダリングをトリガする。ディスパッチャはフィルタにデータを適用し、フィルタリングされたデータをストアに保存し、ビューはフィルタリングされたデータをレンダリングします。