気持ち
Laravel + Vue.jsエンジニアもスマホアプリを作りたいと思い、React Nativeに手を出しました。
FluxやReduxも流行ってるみたいなので、React Native + Reduxでアプリを作ってやろうと思いました。
ReactNative公式チュートリアルやRedux入門記事を読み終え、アプリの仕様をざっくり考えてUIを組み、ロジックの設計及び実装フェーズに入りました。
これから実装していくのはチュートリアルのような小規模なものではなく中規模レベルのものであるため、Reduxという枠組みがあるとは言え、実装途中でコードが複雑にならないか心配になりました。
やり方は色々あると思うのですが、Reactの素人なりに色々ググってみると以下の記事が面白そうだったので、頑張って英語を読んで自分の言葉でまとめました。
Component State vs Redux Store
記事概要
上記記事の筆者は1年半のReact+Reduxでの開発経験から、React+Reduxの初心者は大抵「どのcomponentをRedux Storeに依存させるべきで、どのcomponentを自身の内部stateにのみ依存させるべきかの判別で混乱する問題」に直面しがちだということを知ったそうです。そしてその判別を簡単にする試みとしてこの記事を書いた、とのことです。
記事の内容を以下にまとめました。記事内の用語はそのまま使いつつも、自分が理解しやすい形でまとめているため文章の構成が入れ替わったりしています。
記事まとめ
Component/this.state/Redux Store間での依存関係で混乱しないためには
①データをどこに格納すべきか
②componentファイルをどのようなディレクトリ構成にすべきか
の２つの切り口から、判別を行うとよい。それぞれ以下解説。
①データをどこに格納すべきか
・複数のcomponentやpage間で共有される必要のあるデータはRedux Storeに格納すべき
記事内の例では、ヘッダーに表示されるログイン情報やショッピングカート情報は複数page間で共有される情報なので、Redux Storeに格納している。
・そのcomponentでしか使わない情報はthis.stateに格納すべき
記事内の例では、商品一覧情報は「ProductsContainer」componentでしか使われないため、ProductsContainer.stateに格納している。
②componentファイルをどのようなディレクトリ構成にすべきか
・components/Presentational/
・components/Smart/
・containers/
の３つが注目すべきディレクトリである。
・components/Presentational/ にはDumb Components (Presentational Componentsとも呼ぶ) のファイルを保存すべき。（Dumb=物の言えない, Presentational=表現の）
Dumb(Presentational) Componentsとは親コンポーネントから受け取ったデータをthis.props.~~で表示することだけが責務であるcomponent。
Smartでなく物の言えないComponentのため、this.stateを持たない。
・components/Smart/ にはSmart Componentsのファイルを保存すべき。
Smart Componentsとはthis.stateを持っているcomponentのこと。
内部に情報やロジックを持っているのでSmart。
・containers/ にはContainer Componentsのファイルを保存すべき。
Container ComponentsとはRedux Storeと連携するcomponentのこと。