#Fluxの使用
当初は、Backbone.jsとReact.jsを組み合わせてメモアプリを作成しようと考え、作成していたのですが、コンポーネント間のpropsの受け渡しのバケツリレー(特に、子から親へのcallback関数を使用したpropsの受け渡し)が面倒になり、しかも、props受け渡しのためのコードも追加された結果、コードも複雑になり、分かりづらいコードとなってしまった。私のスキル不足かもしれませんが。。。
そこで、他にうまい実装方法がないか、ググっていたところ、Fluxというアプリケーションアーキテクチャがあり、各コンポーネントで管理していたsateを外出しすることで、面倒な子から親へのcallbackを使用したpropsの受け渡しをしなくても、stateを管理するFluxのStoreへの1箇所の更新を実施することで、各コンポーネントが管理していたstateを集中管理出来るようになった。(目からウロコだった。)それにより、propsの受け渡しに使用していたコードがなくなり、コードの見通しも良くなり、わかりやすいコードになったと思う。
Fluxの大体の流れとしては、Storeで管理しているStateの情報をTOPコンポーネントへ渡すことで、下の階層のコンポーネントにStateが伝播し、画面が更新される。で、また、コンポーネントの状態に変更があった場合は、FluxのStoreへ更新を実施し、FluxのStoreの更新が発生したら、TOPコンポーネントにStateの情報を渡すことで画面が更新される流れである。
で、上記では、画面からStoreへの更新と記載したが、Fluxでは、画面からStoreへの更新は、以下の流れとなる。
①画面にて状態が変化。
②画面から変化した状態に対応するActionをコールする。
③Actionは、DispathcerへAction識別子と変化した状態データと共に送付。
④Dispatcherは、Action識別子を参照して、対応するStoreの受け渡す。
⑤Storeは、状態を更新し、画面へ更新したデータを受け渡す。
⑥画面は、Storeから受け取ったデータを取得し、画面を更新する。
っで、Fluxの詳細については、ググるとたくさん説明しているサイトがあるので、探してみてください。でも、WEB+DB pressのNo87の伊藤直也さんがFluxについて記載した記事があったのですが、私的にそれが、一番わかりやすかったです。