Edited at

【React.js】Fluxの概念を勉強するときにとっても役に立った記事まとめ

More than 1 year has passed since last update.

【2016/12/17 追記】

React(flux)を使ったブログエンジンを開発しました!

何か参考になれば嬉しいです!

Notee

https://github.com/funaota/notee


最近React.jsを始めた新米javascripterです!

こんな感じで作ってきました。

【rails/非同期】js初心者がいいね機能をReact.jsで実装してみた。その①

http://qiita.com/funao/items/60aa3d7e36cf93e0d832

【rails/非同期】js初心者がコメント機能をReact.jsで実装してみた。その①

http://qiita.com/funao/items/55a91ff1732b9c825630

ただ、Fluxがまだいまいちピンときてなかったので、今回しっかり勉強してみました。そのときに役に立った記事をまとめました。


役に立った記事一覧


Fluxが必要な理由が分かる記事

ReactとFluxとReduxについて順を追って整理する

https://hogehuga.com/post-1095/

この記事のおかげで、なんでFluxの方式が必要なのかが分かります!

必要性がわかったあとだと、めっちゃ理解が早い気がします。


Fluxの基礎的な部分がめっちゃ分かる記事

Reactの単純なサンプルでFluxの実装を解説

http://mae.chab.in/archives/2747

こちらは前提になる知識から、Fluxを使う場合、使わない場合を比較してくれたり、丁寧に説明してくれます。

これを読めば大体おおまかに理解出来るはずです。


短期間でFluxを実装してみる記事

10分で実装するFlux

http://azu.github.io/slide/react-meetup/flux.html

めちゃめちゃ簡単にしかも図解してまとめてくれます。

一緒に作りながらやっちゃえばたくさんみにつくはず!

コードの全体像はこちら

https://github.com/azu/mini-flux


railsでfluxを使う時にありがたい記事

react(flux)とrails(turbolinks)の親和性

http://qiita.com/8398a7/items/d2a9bd9be0476213e086


Fluxの認識を自分なりにまとめました(随時更新します!2016/05/10)

Fluxは、Component間のやりとりをわかりやすくするための構造を作るためにある。

Fluxには、View、Store、Actionがある。


  • Viewは、名前通りViewの表示と、イベント発火

  • Storeは、情報の保持、変更などを司ります

  • Actionは、Viewでイベント発火したものを受け取り、処理を行います。

fluxの流れ


  • View → Action → ( Dispatcher, EventEmitter ) → Store → View

ActionからStoreに直接伝えられないから、DispatcherとかEventEmitterを通じてStoreに伝えます。