Reduxの設計で気をつけるところ

※ Presentational and Container Components - なっく日報 に補足を書きました。

概要

http://rackt.github.io/redux/docs/basics/UsageWithReact.html

medium.com

らへんに書いてある「Smart Components」「Dumb Components」を理解したよというお話です。

ポイント

以下、個人的な解釈です（ツッコミどころあればどうぞ！）

• VとCを切り離す
• ReduxとかFlux系ライブラリへの依存を切り離す

あたりがポイントかなと。

VとCを切り離す

Reactコンポーネントは

• 気をつけないと、MVCでいうところのVとCを兼ねた作りになりがち（Fluxアーキテクチャを採ったとしても！）
• 以下のように別々にわけるとより良い作りになる
  • コントローラ的なコンポーネント（Smart Components）← C と
  • CSSとか表示に関わる要素が絡むコンポーネント（Dumb Components）← V に

Reduxとの依存を切り離す

• Smart ComponentsはReduxとの依存関係を持つ
• Dumb ComponentsはSmart Componentsからprops経由で全てを受け取るようにする

メリット？

• Dumb Componentsの再利用性が高まる
• テストしやすくなる
• デザイナー的な職種との分業がしやすくなる

まとめ

Reduxのexamplesで、Reactコンポーネントであっても、containersとcomponentsと違うディレクトリに入っているモノがあり、 「どういう基準で分けているんだ？？？」と疑問に思ってました。

が、理解したことから類推すると

• contaniners = Smart Components
  • reduxやactionsをimportしている
• components = Dumb Components
  • reduxやactionsをimportしていない。
  • 必要なモノは親から全てprops経由で受け取っている

という構造になっているはず。

他の参考記事

medium.com

や

JSX, a year in · GitHub

も理解が深まるのでオススメします。