React/状態管理

• 結局FluxやらReduxやらって何なのか個人的なまとめ
• ReactとFluxとReduxについて順を追って整理する

Flux †

• Flux は Facebook が提唱したアーキテクチャパターン
• データのフローが一方通行なのが特徴

  [Action => Dispatcher => Store => View] => [Action ...

• Action
  • ユーザイベントが発生した場合や、APIリクエストが完了した場合などに、状態をどのように変更すべきかという情報をまとめたもの
• Dispatcher
  • ActionをStoreへ届けるためのもの
• Store
  • アプリケーションの状態を管理するもの
  • Dispatcherのイベントを購読し、Actionに応じて状態を変更し、Viewに変更を伝える
• View
  • Storeのイベントを購読し、Storeが更新されたら自身を更新する
  • Storeが管理しているデータをViewのstateとして使い、Storeが更新されたらsetStateを呼び出して子要素にpropsとして渡すことでDOMツリーを更新する

Redux †

• 【入門】ReduxでReactの状態管理をする！その使い方とメリットを解説。