Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

8章Flux

最後の章で紹介するのはFlux（https://facebook.github.io/fluz）です。Fluxはコンポーネント間のやり取りや、アプリケーション全体でのデータの流れを管理するための新しい方法です。ここまでの例では、親から子にプロパティを渡し、onDataChangeなどを使って子の側での変更を監視するといった方法がとられています。しかしこうすると、コンポーネントが持つプロパティの数が増えすぎてしまいます。すべてのプロパティの組み合わせの下で動作をテストするということが困難になります。

また、プロパティを子から孫そしてひ孫へとずっと渡してゆかなければならないという状況も考えられます。似たようなコードが繰り返されるというのは望ましくありません。しかも、コードの相互関係は複雑化し、コードを読む人々に精神的負担を強いるでしょう。

このような問題を解決し、アプリケーション内でのデータの流れを管理しやすくするために考えられたのがFluxです。Fluxという特定のライブラリがあるわけではなく、アプリケーションのデータを構成し整理するための考え方を意味します。ほとんどの場合、重要なのはデータです。ユーザーがアプリケーションを利用するのは、自らのお金やメールあるいは写真などのデータを管理するためです。UIが少しくらい不格好でも、ユーザーは我慢できます。しかしデータの状態については、常に混乱のないようにしなければなりません。例えば、ユーザーが送金したのかしていないのかわからないような状態は許されません。

Fluxの考えを実装したオープンソースのライブラリは多数あります。本書ではそれぞれについて見てゆくことはせず、より実践的なアプローチをとります。アイデアを把握して効果に納得できたら、各種のライブラリについて調査したり、自分だけのソリューションを考えたりするのもよいでしょう。 ...