勉強がてらまとめたものです。違うこと書いてるかもなので注意ね。
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に変更を加えてはいけません。
次のようにReducerは単に関数です。
const HogeReducer = (state = initialState, action) => { // actionの種別によって分岐などして新しいstateを作成して返却する return { ...state, // 更新内容 } }