Redux.combineReducers についてのメモ

コンポーネント毎に機能を分割する上で、 combineReducers はとても役に立った。

しかしながらこれが持つ微妙な癖に少し戸惑ったのでメモを残しておきたい。

※ここにあるのは経験則です。ドキュメント読めばもっとスマートなやり方があるかもしれません。

グローバルステート

どのコンポーネントからも参照できるプロジェクト全体のステート。

combineReducers が次のように設定されているとき、

export default combineReducers({
  "reducerA": componentReducerA,
  "reducerB": componentReducerB
});

グローバルステートは次のような形になる。

{
  "reducerA": {
    ...
  },
  "reducerB": {
    ...
  }
}

各 Reducer のスコープ

combineReducers によって結合される各 Reducer は、グローバルステート内に割り当てられたそれぞれのネームスペースのみ操作できる。

上記の例で言えば、 componentReducerA は state.reducerA の内部しか操作することはできない。

言い換えると、 componentReducerA は state.reducerB を操作することができない。

別コンポーネントのステートを更新するには

ActionCreator によって作成された Action は、 combineReducers によって結合されたすべての Reducer に通知されるため、これを利用する。

最後に

子コンポーネントは Action だけ飛ばしてルートコンポーネントの Reducer でステート管理すればいいのでは、と思い始めている。