ContainerコンポーネントとPresentationalコンポーネント、reduxとの接続についての方針とか

ReactとReduxでアプリケーション書いていて、containerコンポーネントとpresentationalコンポーネントの分け方どうするかという話。スマホで雑に書いているので、あとでまとめる。

元ネタ

redux作者のブログ記事のあれ。

参考にしたもの

AbemaTVの人のAtomic Designの本に書いてあった方法

コンポーネントの種類分けることで何ができるのか

• 関心の分離
• それによって、一つのContainerコンポーネントを使って、別の見た目のコンポーネントを渡して、同じロジックで別の見た目のコンポーネントを簡単に作れたりする。

もう少し詳しく

• イベントが起きたときに何をするかというのをcontainer側に書いておいて、見た目のコンポーネントにはそれをpropsとして渡す
• reduxのstateに変更を加えるような処理はactionを投げてreducerが処理をする
• 見た目コンポーネントがそのコンポーネント自身でしか使わないような見た目のStateを持つのは許容する。
• ファイルは今のところ分けずに、1ファイル内にcontainerもpresentationalも書いてる
• reduxと接続するのはcontainer