「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
4thステップ では、コンポーネント分割について。
コンポーネント分割 †
フォルダ †
下記コンポーネントのフォルダは分けても分けなくてもイイ。
ただ、ココのサンプルでは、
にフォルダを分ける。
タイミング †
アンチパターン †
手順１ †
前提 †
トレードオフ †
方針 †
... †
... †
サンプルの実装 †
2020年4月、開示予定
参考 †
手順２ †
前提 †
- Containerから複数のComponentを呼び出すようなComponent分割も可能。
- Containerの分割（Container in Container）も可能らしいので、
ここでは、Containerを分割して、対応するComponentも分割する。
トレードオフ †
例えば、
- Containerで２つのComponent、ComponentAとComponentBを表示する場合...、
- Componentが増えていくとその分、必要なハンドラやプロパティが増える。
- mapStateToProps? と mapDispatchToProps? が肥大化してしまい見通しが悪くなる。
- しかし、全Componentを Containerにするとやり過ぎになるので適切な単位で分割する。
- データフェッチしていた箇所だけを元のContainerに残す。
- ComponentA、B に関するプロパティとハンドラをそれぞれ ContainerA、B に分割する。
など。
方針 †
ルートのContainer †
- には、mapStateToProps?, mapDispatchToProps?を定義ぜず、
- ComponentにConnectしない（Renderが動かなくなる）。
- DOMのRenderを実装する。
子のContainer †
- には、mapStateToProps?, mapDispatchToProps?を定義し、
- ComponentにConnectする。
- DOMのRenderを実装しない。
- Component側にDOMのRenderを実装する。
モジュール化 †
１画面
みたいな。
サンプルの実装 †
- Component分割によって、一部、Stateで運用していた所も、
mapStateToProps?メソッドを使用してProps化し、
Component間で状態の共有も容易に書くことが出来た。
参考 †
参考 †
Qiita †
mizchi's blog †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
