勉強がてらまとめたものです。違うこと書いてるかもなので注意ね。

Store

React/Reduxにおいて、Stateを管理するStoreはただひとつだけ存在します。

Storeがただひとつだけであるのは、制御の流れをシンプルにするためです。Stateを更新するためのActionはすべてStoreが受け取ります。

「グローバルにたったひとつ！？正気で言ってんのか！？」と思いますが、ReducerごとにそれぞれのStateを取り扱うので、グローバルにひとつの構成を把握する必要はありません。

State

画面表示の対象にするデータがStateです。

StateはStoreにおいてのみ更新することができます。更新はStoreがActionを受け取ることで実行されます。更新処理の実体はReducerです。

Action

Stateを更新するきっかけになるのがActionです。

Actionは単にオブジェクト（を返却する関数）で、Stateを更新するのに必要なデータをもちます。すなわち、どのような作用であるかを識別するための種別とどのように作用させるかを示す値です。

たとえば次のようなActionを作ることができます。

const inputNumber = (number) => ({
    type: ActionTypes.INPUT_NUMBER,
    number
})

Reducer

ActionをもとにStateを更新するのがReducerです。

Reducerは単に新しいStateを返却する関数です。Actionがもつ種別と値に応じて新しいStateを返却しますが、もとのStateに変更を加えては&color(red){いけません};。

次のようにReducerは単に関数です。

const HogeReducer = (state = initialState, action) => {
  // actionの種別によって分岐などして新しいstateを作成して返却する
  return {
    ...state,
    // 更新内容
  }
}