Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

出典 : Redux - Three Principles

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な関数になっています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away