ユーザー情報の共有
ログイン中の人は誰か
fleama では、ログインしている人の情報をあちこちで使います。ヘッダーの名前、出品ボタンを押せるかどうか、マイページの中身、商品が自分の出品かどうかの判定。どれも同じ「いま誰か」を見ています。
テーマとまったく同じ形なので、Context で配ります。アプリ全体で1つしかなく、多くの部品が見るものは Context の出番です。
まだログイン機能は作らない
本物のログインはサーバーが要ります。第2章のモック API と同じ考え方で、いまは決め打ちのユーザーを1人置きます。あとで本物に差し替えるときに直すのは、この置き場だけで済みます。
TypeScript (JSX)
export type User = {
id: string;
name: string;
};未ログインを型で表す
テーマと違うところが1つあります。ユーザーは居ないことがあるという点です。ログアウトしていれば誰も居ません。
TypeScript (JSX)
export const UserContext = createContext<User | null>(null);User | null は「User か、または null」という意味です。第1章で useState<Item | null> を書いたときと同じ形です。
こう書くと、受け取った側で user.name といきなり書けなくなります。null かもしれないからです。TypeScript が止めてくれるので、未ログインの画面を作り忘れられません。
TypeScript (JSX)
const user = useContext(UserContext);
if (user === null) {
return <p className="greeting">ログインしてください</p>;
}
return <p className="greeting">{user.name} さん</p>;早めに return して抜けると、そのあとの行では user が null でないと分かっています。これは TypeScript入門で出てきた絞り込みです。
Context は増やしてよい
テーマとユーザーを1つの箱にまとめたくなりますが、分けたままにします。まとめると、テーマを切り替えただけでユーザーを見ている部品まで描き直されます。変わるきっかけが違うものは、箱を分けるのが基本です。
演習
UserContext を作って、疑似ログイン中のユーザーを画面に配ります。