LoginSignup
131
131

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-05-10

【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に伝えます。

131
131
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
131
131