flux
redux

結局FluxやらReduxやらって何なのか個人的なまとめ

FluxやReduxがまた分からなくなったので、個人的なまとめをしました。
「これ間違ってるぜ!」ってのがあればコメント等でご指摘していただけると嬉しいです。
また何か気付きがあればちょこちょこ更新入れることもあります。

Fluxって?

Facebookが提唱しているアーキテクチャで、JavaScriptのデータの流れを分かりやすく整理するために使われます。

JavaScriptはイベントドリブンなため、様々なデータの流れがあり複雑化しやすくなっています。
そのためFluxではその流れを一方向にまとめよう!といったことをやっています。
Dispatcherを通して状態を変化させていく様子はデザインパターンのオブザーバーパターンと同じような形ですね。

基本的には以下の様な流れです。
flux1.png

またユーザーの行動によってViewから新たにActionを発行し、Dispatcherへと伝搬させることも出来ます。
flux2.png

それぞれが担う役割は

  • Action:入力内容を元にデータを作成
  • Dispatcher:データを送る(EventEmitter)
  • Store:データを貯める
  • View:データを表示する

んじゃReduxって?

ReduxはFluxの派生ですが、Fluxとの違いは色々とあります。
Reduxには三原則があったり、FluxにあったDispatcherがReduxにはありません。
また、stateオブジェクトに対し直接変更を加える事はせず、新しいstateオブジェクトを作成する方法をとっています。

ReduxとFluxのアーキテクチャ全体図

こちらはFluxの場合
flux-arch.jpg

こっちはRedux
redux-arch.jpg

※画像出典:UNIDIRECTIONAL USER INTERFACE ARCHITECTURES

Reduxの三原則

  • Single source of truth
  • State in read-only
  • Changes are made with pure functions

Single source of truth

信頼できる唯一の情報源。
アプリケーション全体のstate(状態)が一つのstoreのオブジェクトツリーで表現される。
ユニバーサルアプリ(様々なプラットフォームに対応するアプリケーション)の作成が用意になり、サーバーからのstateをシリアライズでき、余分なコーディングをクライアントに集約することができる。

一つのステートツリーに集約することで、デバッグが容易になるメリットがあり、またundo/redoの実装も容易になります。

State in read-only

stateは常に読み取り専用にする。
stateを変更するにはactionを通じてのみに徹する。

これはViewやネットワークコールバックからの直接的な変更がないことを保証でき、actionはオブジェクトなのでデバッグやテストに利用しやすくなります。

Changes are made with pure functions

actionがstateを変更する際にreducerを通して行います。
reducerはactionとstateを受け取り、新しいstateを返すpureな関数になっています。