状態やコンポーネントを型にまとめてアプリケーションコンポーネントに渡す
ここに書いたものをもうちょっと書き直した
ここで発表したmiyamonz.icon
アプリの複数領域にまたがって登場する機能や概念をどう扱うか？どう実装するか？の一つの例
モジュールからimportして、アプリケーションコンポーネントがconsumeする情報
これを型として表してしまうとよい
プロパティを明示的な名前にすることが大事
https://gyazo.com/10a323bdafe7546f84e0ea4c1c5d0ca2
このまとまりは、実際のケースに沿って適切に付ける必要がある
featureという名前を使うと意味が納得しやすいmiyamonz.icon（経験則）
既にfeatureという単語を使ってなければ
単純に、この型の中身や意味から素直に名前をつけてもOK
各々の作りたいアプリケーションコンポーネントに基づいて、適切な型、プロパティ名を定めて、そのオブジェクトを渡す
これがうまくハマるとかなり良い
凝集度が高く
似た機能の追加や削除がしやすい
読む人が理解しやすい
Aと、その内部機能の一種との結合を、１箇所で済むようにしている
そのとおりだと思うmiyamonz.icon
参考
平凡なTODOアプリ
TODOタスクには、「属性」がある
タスク名
完了 / 未完了
優先度
期限
これらは、各々以下を持ってる
個別の属性ごとのUI
完了/未完了だったら、toggle button
絞り込み時
絞り込み用のUI
絞り込み時のステート
これらを型として表してしまう
code:ts
type AttributeFeature = {
id: string;
TaskAttributeItem: React.FC<{ task: Task }>;
filterCondition?: Atom<(task: Task) => boolean>;
ViewToFilter?: React.FC;
};
TODOアプリは、属性ごとのviewであったり、絞り込みなどを行うので、そういったコンポーネントをfeature実装側に要求する
個別の属性をファイルで定義して、importしてAppにわたす