つくる - 3状態UI完備
第3章のまとめとして作る
新しいことは出てきません。ここまでの5つを、一覧と出品の両方に行き渡らせます。
- 3状態のユニオン型。loading と success と error を1つの state で持つ
- スケルトン。待っている間に場所を取っておく
- エラーと再試行。失敗を伝えて、もう一度試せるようにする
- 空状態。0件のときに次の道を出す
- 送信中の制御。二重送信を止める
通信のたびに4つ考える
画面を作るときに考えることは、成功したときの絵だけではありません。1本の通信につき、いつも次の4つを揃えます。
- 待っている間の絵
- 失敗したときの絵と、そこからの逃げ道
- 成功したが0件だったときの絵
- 成功して中身があるときの絵
この4つが揃っていない画面は、手元で動いているように見えても実務では使えません。動くものと使えるものの差は、ほとんどここに出ます。
絞り込みと再試行を同じ仕組みで回す
カテゴリを変えたときも、再試行を押したときも、やることは同じです。もう一度取りに行くだけです。だから useEffect の依存配列に両方を並べます。
useEffect(() => {
setState({ status: "loading" });
// 取得の処理
}, [category, reloadKey]);条件が増えても依存配列に足すだけで済みます。取得の処理を1か所にまとめておくと、この足し算がそのまま機能追加になります。
出品したあとに取り直す
出品が成功したら、一覧も新しくします。返ってきた商品を自分で配列に足してもよいのですが、reloadKey を1つ進めて取り直すほうが、サーバーの中身と画面が必ず一致します。
演習
一覧と出品の全部の状態を、1つの画面に揃えます。