Vuexでの管理を最小限にする
ストアとコンポーネントのつながりを最小限にすることで変更に強くする
2種類あるらしい。
①表示コンポーネントとコンテナコンポーネントを分ける
②Atomic Design
今回は、①の手法について調べてみた。
①の手法は、Reduxの作者Dan Abramov氏が提唱したReactコンポーネントと同様の分類パターン。
表示コンポーネントは見た目を表現するコンポーネントなのでストアにアクセスしないようにする。なので、イベント(emitなどで)をコンテナコンポーネントに伝えたり、ストアからのデータをコンテナコンポーネント経由でpropsで受け取ることしかしない。これにより、ストアとコンポーネントの繋がりを制限でき、表示コンポーネントの再利用性が高くなるメリットがある。
コンテナコンポーネントは、ストアに対してアクションしたり、ストアからデータを取得したりできる。
最後に
どのタイミングでコンポーネントを表示コンポーネント、コンテナコンポーネントとして分類すべきなのかは慣れないうちは難しいと思う。
Reduxの作者Dan Abramov氏は、初めから正しく分類しようとはせず、段階的に分けていくのは良いと言っているそうです。
うん。勉強になった!!
この記事が気に入ったらサポートをしてみませんか?