ストアとコンポーネントのつながりを最小限にすることで変更に強くする

２種類あるらしい。

①表示コンポーネントとコンテナコンポーネントを分ける
②Atomic Design

今回は、①の手法について調べてみた。

①の手法は、Reduxの作者Dan Abramov氏が提唱したReactコンポーネントと同様の分類パターン。
表示コンポーネントは見た目を表現するコンポーネントなのでストアにアクセスしないようにする。なので、イベント（emitなどで）をコンテナコンポーネントに伝えたり、ストアからのデータをコンテナコンポーネント経由でpropsで受け取ることしかしない。これにより、ストアとコンポーネントの繋がりを制限でき、表示コンポーネントの再利用性が高くなるメリットがある。
コンテナコンポーネントは、ストアに対してアクションしたり、ストアからデータを取得したりできる。

最後に

どのタイミングでコンポーネントを表示コンポーネント、コンテナコンポーネントとして分類すべきなのかは慣れないうちは難しいと思う。
Reduxの作者Dan Abramov氏は、初めから正しく分類しようとはせず、段階的に分けていくのは良いと言っているそうです。
うん。勉強になった！！