読者です 読者をやめる 読者になる 読者になる

なっく日報

技術やら生活やらのメモ

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

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

概要

medium.com

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

ポイント

以下、個人的な解釈です(ツッコミどころあればどうぞ!)

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

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

VとCを切り離す

Reactコンポーネント

  • 気をつけないと、MVCでいうところのVとCを兼ねた作りになりがち(Fluxアーキテクチャを採ったとしても!)
  • 以下のように別々にわけるとより良い作りになる

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

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