Contextを作る

通り道を作らずに配る

前の回で、テーマを4段のバケツリレーで運びました。途中の ItemList と ItemCard は theme を使わないのに、型にも呼び出しにも theme が並びました。

React には、この受け渡しを飛ばす仕組みがあります。Context です。値を入れておく箱を1つ作り、木のどこからでもその箱を覗けるようにします。

前の回の準備をテーマに使う

前の回では、表示言語を例に createContext の生成・型・既定値と、Provider の範囲を見ました。今度はテーマで同じ考え方を使います。ThemeContext.tsx に箱を作り、既定値を light にします。App では画面全体を Provider で包み、今の theme を value に渡します。

配る範囲を確かめる

前の回の言語の例と同じように、Provider の開始タグと終了タグの間が配達先です。

value に入れたものが、この中に描かれる部品すべてに届きます。何段深くても関係ありません。包んだ範囲が配達先だと考えてください。

Provider で包める場所は木の途中でも構いません。fleama では画面全体で同じテーマを使うので、いちばん外側で包みます。

この回はまだ取り出さない

新しく覚えることは1回に1つにします。この回では箱を用意して配る宣言までにして、バケツリレーはそのまま残します。取り出して受け渡しを消すのは次の回です。

演習

ThemeContext を定義して、App の中身を Provider で包みます。