React＆Reduxアプリケーション設計

Question

私はreduxに新規であり、グローバル状態を保持するフロントエンドアプリケーションを作成しています。この状態はajax経由で起動時に取得され、新しいデータが取得されるときにpoll/pushによって更新されます。各URLへのナビゲーションにはアクションにディスパッチするアクタがあり、viewStateオブジェクトの一部をこのglobalStateのフィルタ付きビューで上書きするレデューサを呼び出します。例えばこのステップは、その後ReactDOM.render()は別の俳優を経由して呼び出され、すべてのコンポーネントが再レンダリングviewStateで更新された値とした後、これは私のコードではありません（

state { 
    viewState: { 
      items: [{id: 1, value: 'a'}] 
    } 
    globalState: { 
      items: [{id: 1, value: 'a'}, 
        {id: 2, value: 'b'}, 
        {id: 3, value: 'c']} 
    } 
} 

：URL /items/filter/aへのナビゲーションは、次のようviewStateを調整しますユニコーンスターターパックからのそのストレート）

これは、このタイプのアプリケーションを構造化するための賢明な方法ですか？そしてb）そのIDでそのオブジェクトがviewStateに現在ある場合、潜在的に、その後viewStateを更新してしまうアプリケーションの起動時にglobalState変数を初期化し、その後の更新のためのリスニングの最良の方法（あるもの）

Answer 1

私は持っていません。私たちはプロジェクトでプレーンバニラフラックスを使用していたので、Reduxの経験はありましたが、同様のシナリオがあり、私たちのソリューションもあなたのシナリオに合うかもしれません。

一般的に、これはグローバルな状態をセグメント化するための良い戦略だと思います。また、これを行うライブラリ（例えばFacebook Relayのような）もあります。このライブラリは、この機能を提供し、より多くの機能を提供します。

初期状態のレンダリングについては、空のデータセットを処理するためにすべてのコンポーネントが設定されています。すなわち、データが（初期レンダリング時に）受信されない場合は、空のdivとローダーがレンダリングされます。次に、すべてのデータがサーバーから取り出されると（Qライブラリーを使用した同期の約束を使用して）、BeginRenderアクションが発生し、データでいっぱいになったすべてのストアが変更イベントを発生させます。ストアにサブスクライブしたコンポーネントはイベントを受け取り、ストアメソッドを呼び出してデータを取得します。新しいデータを受け取ると、コンポーネントの状態が更新され、コンポーネントがデータで再描画されます。