購入フロー
カートから購入までをつなぐ
第6章でカートを作り、第7章で画面を分けました。残っているのは、カートに入れた商品を買うところです。
fleama の購入は疑似決済です。疑似決済とは、本当のお金を動かさずに「買われた」という事実だけを記録するやり方です。商品の status を "onSale" から "sold" に変えれば、fleama の購入は成立します。
1項目だけ書き換える PATCH
商品を丸ごと送り直すと、商品名や価格を一緒に送り忘れたときに消えてしまいます。変えたいのは status の1項目だけなので、PATCH を使います。
TypeScript
await fetch("/api/items/" + item.id, {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ status: "sold" }),
});mock-api.json の PATCH の経路には update が付いています。これは送った項目だけを上書きするという意味です。status だけ送れば、商品名も価格もそのまま残ります。返ってくるのは、上書きしたあとの商品1件です。
返ってきたものを画面に反映する
購入したのに一覧が販売中のままだと、売れたのかどうか分かりません。返ってきた商品で、手元の一覧の同じ id を差し替えます。
TypeScript (JSX)
setItems((prev) =>
prev.map((item) => bought.find((one) => one.id === item.id) ?? item)
);もう一度 /api/items を取り直しても同じ結果になりますが、通信が1回増えます。返事をそのまま使えるなら、そのほうが速く終わります。
終わったことを伝える
押しても画面が何も変わらないと、買えたのかどうか利用者には分かりません。購入が終わったら、完了したことをはっきり出します。
演習
カートの商品を購入し、売り切れが一覧に反映されるようにします。