8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React.jsのpropsのバケツリレーに苦労している方は、Fluxを使用してみては

Last updated at Posted at 2015-11-01

#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について記載した記事があったのですが、私的にそれが、一番わかりやすかったです。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?