React と AtomicDesign - Organizm(有機体)編

すべて個人的な考えです。

Atom や Molecule (や Organizm)をよしなに組み合わせるための Organizm (有機体)

Molecule と同じように。Atom や Molecule そして Organizm 要素をよしなに組み合わせて配置できるようにします。

この層では中に Atom や Molecule そして Organizm を配置できます。

データを取ってきて小要素に分配する

この層では子要素(Molecule や Atom)にレンダリングに必要なデータを渡してあげる役割もあります。従って、この層は小要素は何を欲しているかすべて知っている必要があり、それを元にデータを取ってくる必要があります。

それは例えばre-ducksの考えを取り入れていてreduxを使っているプロジェクトであれば、useSelectorを使って直接持ってくることができます。

データを取ってくるのは Page じゃないのかみたいな考えもあると思いますがコンポーネントの大きさによっても変わってくるかなと思います。例えば、全体をぼんやり見ているだけじゃただの石だけど、近くでじっくり見るとキラキラしていて綺麗みたいな(耳をすませばのアレ)

もちろん Page でもデータを取ってきていいのですが、Page は Page で必要なものだけ、それ以外のじっくり見た時の追加情報はそれぞれ Organizm 層でも取ってきてもいいんじゃないかと思います。

これは Page 層の肥大化を避けるという目的も大きいです。それは、Page 層でのレンダリングの制御が複雑になる事や、データを細部にまで行き渡す為にかなりの階層に伝えていかなければならない事を避ける狙いがあります。