10月から入社した会社でReactを使い始めましたので、まだ2ヶ月です。その前はNuxt.jsを使ってました。
Containerについて学びがあったので、備忘録としてまとめます。
もともとContainerはComponentとReduxをつなぐ役割(MapStateToProps, MapDispatchToPropsをしてStateとActionを渡す)だと解釈していましたが、詳しく調べてみると少し違ったみたいです
ReduxとReactを同時に使うアプリケーションでは、Componentを表示のPresentational ComponentとロジックのContainer Componentに分離するアプローチが理解しやすく、Componentの再利用性も高まって良い。(Redux公式ドキュメントから抜粋)
つまり、ContainerもComponentだったのです。
以下Redux公式ページから抜粋。
Presentational Component:
受け取ったデータをもとに、その名の通りプレゼンテーション(表示)する事を担当
- Reduxの変更を検知:NO
- データ参照:containerからprops
- データ書換:containerからprops
Container Component:
Storeを監視したり、アクションを発行したりロジックに関する事を担当
- Reduxの変更を検知:YES
- データ参照:Subscribe to Redux state
- データ書換:Dispatch Redux actions
という具合にComponentを表示とロジック2種類に分ける事がNuxt.jsでは無い考え方だったので最初は慣れませんしたが、1ファイルにまとめると閲覧性が落ちやすくなるので、この手法は慣れると便利だと思います。