2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React+ReduxにおけるContainerの役割

2
Last updated at Posted at 2019-12-17

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ファイルにまとめると閲覧性が落ちやすくなるので、この手法は慣れると便利だと思います。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?