カートreducer
いまの reducer には抜けがある
前のレッスンで書いた reducer は、形としては正しく動いていました。ただしカートの決まりごととしては足りていません。抜けは2つです。
同じスニーカーを2回入れると、行が2つ並びます。fleama のカートで欲しいのは「スニーカー 2点」の1行です。もう1つは、数量を -1 で減らしていくと 0 のまま、あるいはマイナスのままカートに残ることです。
どちらも画面側で頑張るのではなく、reducer の中で決める話です。カートの決まりごとは全部ここに集めます。
既にある行を探してから足す
ADD は「入っていれば増やす、入っていなければ足す」の2通りになります。
TypeScript (JSX)
case "ADD": {
const found = cart.find((line) => line.item.id === action.item.id);
if (found) {
return cart.map((line) =>
line.item.id === action.item.id ? { ...line, qty: line.qty + 1 } : line,
);
}
return [...cart, { item: action.item, qty: 1 }];
}case の中で const を書くときは、波かっこで囲みます。囲まないと、同じ switch の別の case からもその名前が見えてしまい、まとめて怒られます。
0 になったら行ごと外す
CHANGE_QTY は、渡された数量が 0 以下なら REMOVE と同じことをします。
TypeScript (JSX)
case "CHANGE_QTY":
if (action.qty <= 0) {
return cart.filter((line) => line.item.id !== action.id);
}
return cart.map((line) =>
line.item.id === action.id ? { ...line, qty: action.qty } : line,
);ボタン側は何も変わりません。押した人は「1つ減らす」と伝えただけで、それが最後の1つだったかどうかは知らなくてよい。判断は reducer が引き受けるという分け方です。
元の配列を書き換えない
reducer で一番やってしまいがちな間違いが、これです。
TypeScript (JSX)
case "ADD":
cart.push({ item: action.item, qty: 1 });
return cart;これは動きません。返しているのが同じ配列なので、React は「変わっていない」と見て描き直しません。画面が更新されないのに、コンソールにも何も出ません。原因を探しにくい事故なので、reducer では map と filter とスプレッドだけを使う、と決めてしまうのが安全です。
演習
ADD と CHANGE_QTY を、カートの決まりごとに合うように直します。