ReactとReduxを勉強しています。 それぞれのチュートリアルをこなしてみたのですが、ReactとReduxをあわせて使う際のコンポーネントの設計方針が今ひとつ腹落ちしません。その原因は、Reduxのドキュメントにある、
が理解できていないからのように思い、これらについてあらためてドキュメントを読んでみたので、まとめて置こうと思います。
(僕のように英語の苦手な人の役に立つかもしれないと思いつつ...)
まず、Reduxのドキュメント「Usage with React」で、
but if you're unfamiliar, we recommend that you also read Dan Abramov's original article describing the concept of presentational and container components
とあるので、このページを読んでみました。
この記事の中では、
などが書かれています。
それぞれの性質については、次のように書かれています。(僕の意訳です...)
this.props.children
を介して封じ込めを許可されることがよくある。connect()
、RelayのcreateContainer()
、Flux UtilsのContainer.create()
などの高次コンポーネントを使用して生成される。前述のReduxのドキュメントに、両者の違いが纏まっています。
日本語にすると、
Presentational Components | Container Components | |
---|---|---|
目的 | 見え方(マークアップ、スタイル) | 仕組み(データのフェッチ、状態の更新) |
Reduxを知っているか | いいえ | はい |
データの読み方 | propsから読む | Redux stateを購読する |
データの変更の仕方 | propsのコールバックを実行する | Redux actionsをディスパッチする |
何で書かれるか | 手で書かれる | 通常、React Reduxで生成される |
となりそう。
すごくざっくりまとめてしまうと、
と言えそうです。
これを踏まえて、React/Redux約三年間書き続けたので知見を共有します|Enigmo Life などを読みながら、更に勉強してみようと思います。