React と AtomicDesign - Page編
すべて個人的な考えです。
Template を使って適切な位置に要素を配置する
例えば以下のDetailTemplate
は Abstract Class で、Header
とMain
は Abstract Property です。そしてそれらコンポーネントは、間取りはどんな感じか分からないですが、とりあえず適切な位置に配置されるようになっています。
class FooPageContents extends DetailTemplate {
// H1 は Atom
Header = () => <H1>タイトル</H1>;
// Article は Organizm
Main = () => <Article in="foo" />;
}
const FooPage = () => {
return <FooPageContents />;
}
様々な副作用を担当
例えば、<header>
の中身を変更するとかもこの層の役目です。
const FooPage = () => {
React.useEffect(() => {
document.title = 'foo - site'
}, []);
return <FooPageContents />;
}
ちなみにNextJSならマークアップだけで済みます。
import Head from 'next/head';
const FooPage = () => {
return (
<>
<Head>
<title>foo - site</title>
</Head>
<FooPageContents />
</>
);
}
Redux を使っているなら Observer や共通するイベントの処理はこの層で適切にdispatch
することで管理し、各 Organizm や Molecule でそれらを乱立しあまり負荷を掛けない作りにすると良いと思います。
import ObserverContext from '...';
// const ObserverContext = React.createContext();
const FooPage = () => {
const observer = React.useMemo(() => {
return new IntersectionObserver(entries => {
/*...*/
});
}, []);
React.useEffect(() => () => {
observer.disconnect();
});
return (
<ObserverContext.Provider value={observer}>
<FooPageContents observer={observer} />
</ObserverContext.Provider=>
)
}