つくる - Context整備
第5章のまとめとして作る
新しいことは出てきません。ここまでの4つを組み合わせて、fleama の共有状態を整えます。
- バケツリレーの限界 — 通り道になる部品を作らない
- createContext と Provider — 配る箱と配る範囲
- useContext — 使う人が直接取りに行く
- Provider 設計 — state と関数を持つ部品にまとめる
2つの Provider を重ねる
テーマとユーザーは別の箱なので、Provider も2つになります。重ねて書きます。
TypeScript (JSX)
export default function App() {
return (
<ThemeProvider>
<UserProvider>
<Screen />
</UserProvider>
</ThemeProvider>
);
}内側の UserProvider は ThemeProvider の中にいるので、UserProvider 自身もテーマを覗けます。外側と内側の順番に迷ったら、依存する側を内側に置くと覚えてください。今回はどちらも相手を見ないので、順番はどちらでも動きます。
段が深くなるのを嫌って1つの箱にまとめたくなりますが、分けたままにします。テーマを切り替えただけでユーザーを見ている部品まで描き直されるのを避けるためです。
置き場所を決める
ここまでで、値の置き場所が3種類そろいました。
- その部品の中だけで使う値は
useState - 親子ひと組の間で渡す値は props
- アプリのあちこちで同じものを見る値は Context
迷ったら props から始めて、2段以上のバケツリレーになったときに Context を考える。この順で足りなくなってから移すほうが、最初から Context に入れるより整理された形になります。
演習
テーマとユーザーの2つの Context をそろえて、fleama の土台を完成させます。