react.jsは直接DOM操作をすることがないので、他のライブラリに比べて見通しがよいコードが書けます。
ただし、ごく簡単なアプリケーションなら十分機能しますが、コンポーネント間をまたがってイベントをハンドリングすると、急激に複雑さを増します。親階層のコンポーネントで処理を完結できる場合はいいですが、深い階層のコンポーネントをまたがるようなイベントを処理する場合は、悪夢に陥ります。
react.jsではその場合Fluxを使え、と言うことらしいです。それで、自分のプロジェクトをFluxを使うように書き換えました。
Fluxのそれぞれのヒトの役割
まずは、Action。ActionはWeb APIを操作するなどの外界との接点です。ActionはAPIで操作した結果をDispatcherを介してStoreに伝えます。Dispatcherは基本はStoreのhandlerを呼び出しているだけです。Dispacherはそれ以外にもwaitForで他の処理が完了するのを待ってからstoreにイベントを発行する機能もあるようですが、現在のプロジェクトでは使っていません。基本的にはひとつのActionに対して一つのstoreのコールバックにイベントを送信する場合は、あまりdispacherの有り難みはないです。ひとつのアクションが複数のstoreのイベントハンドラーにイベントを発行するケースでは、dispacherを介したほうが良さげです。
Dispacherはstoreが登録したイベントをstoreに伝えます。storeはactionが発行したデータを保持します。ここにデータを集中管理するんですね。そして、componentにさらにイベントを伝搬させます。コンポーネントはイベントを受け取ると、storeにデータを問い合わせて、画面遷移したりstateにデータをセットします。データの流れが一方向に限定されれるので、複数のコンポーネントにまたがっても、データの不整合が発生することがありません。
それで、コンポーネントはコンポーネントないから発生するDOM関連のイベント等に対してActionを操作することと、Flux経由でやってくるデータ変更などのイベントに対して自身のstateをセットすることの2つのことをやるだけです。
感想と疑問
Fluxを使えばデータの流れが一方向になるので、とても見通しが良くなり、データの不整合が発生しなくなります。
でも、例えば、WebAPI経由でデータをポストした場合の画面遷移はどこでハンドリングすればいいんでしょう?特に同じイベントを複数のコンポーネントが処理する場合などです。