「React」と「React+Redux」の決定的な違い

• React単体の場合，Reactコンポーネント自身が個別に状態管理をする。
• React+Reduxの場合，**状態管理する専用の場所(ストア)**で状態管理し，Reactコンポーネントはそれを映すだけに徹する。

Redux図解

フロー全体図

Store

状態は基本的に全てここで集中管理される。イメージとしては**「でっかいJSONの塊」**。

例: カウンタ

{ value: 0, }

規模が大きい場合は状態をカテゴリ別に分類するのが一般的である。

例: TwitterがもしReduxを使っていたら

`{ // セッションに関するもの session: { loggedIn: true, user: { id: "114514", screenName: "@mpyw", }, },

// 表示中のタイムラインに関するもの
timeline: {
    type: "home",
    statuses: [
        {id: 1, screenName: "@mpyw", text: "hello"},
        {id: 2, screenName: "@mpyw", text: "bye"},
    ],
},

// 通知に関するもの
notification: [],

}`

Action および Action Creator

Storeおよびそこに存在するStateはとても神聖なものだ。Reactコンポーネントなんぞ下界のものに直接触らせるわけにはいかんのだ。ここに触れるためには，Actionという儀式を介さなければならない。要するにイベント・ドリブンと同じ概念だ。

1. Storeに対して何かしたい奴はActionを発行する
2. Storeの門番がActionの発生を検知すると，Stateが更新される

Actionは基本的に以下のようなフォーマットを持つオブジェクトになる。

{ type: "アクションの種類を一意に識別できる文字列またはシンボル", payload: "アクションの実行に必要な任意のデータ", }

例えば，カウンタの値を2増加させたい場合，以下のようなオブジェクトになるだろう。頭に @@myapp/ とプレフィックスをつけたのは，他の人が書いたコードとの衝突を避けるためだ。