Sepet reducer
- React kursu
- Orta seviye
- Ders 18/80
- 5 dk
Ekle, çıkar ve temizle aksiyonları olan sepet reducer'ını yazarsın.
Sepet reducer
Bu ders cartReducer fonksiyonunu yazacak. Üç aksiyon tipi: ADD (ürün ekle), REMOVE (ürün çıkar), CLEAR (sepeti boşalt).
ADD case'inde, ürün sepette varsa adetini artır; yoksa yeni öğe olarak ekle. items.find(i => i.id === payload.id) ile kontrol et.
REMOVE case'inde, items.filter(i => i.id !== payload.id) ile öğeyi çıkar. CLEAR case'inde, başlangıç state'e dön: { '{ items: [], total: 0 }' }.
Total hesabı
Total her ADD/REMOVE'da güncellenmelidir. En temiz yöntem: reducer'da yeni items hesaplandıktan sonra total'i yeniden hesapla: const items = ...; const total = items.reduce((sum, i) => sum + i.price * i.qty, 0); return { '{ items, total }' };.
Bu, tek kaynak ilkesidir: items doğruysa total de doğrudur. Ayrı bir state'te total tutmak yerine, items'tan türetmek tutarlılığı korur.
Bu desen, ileride useMemo ile de yapılabilir. Ama reducer içinde hesaplamak, state'in tek yerden yönetilmesini sağlar; debug daha kolaydır.
Uygulama cartReducer yaz
Aşağıdaki iskeleti tamamla. cartReducer fonksiyonu yaz. (state, action) alsın. switch(action.type) ile ADD case'inde { '{ ...state, items: [...state.items, action.payload], total: state.total + action.payload.price }' } döndür. REMOVE case'inde const items = state.items.filter(i => i.id !== action.payload.id); const total = items.reduce((s, i) => s + i.price * i.qty, 0); return { '{ ...state, items, total }' }. CLEAR case'inde { '{ items: [], total: 0 }' } döndür. default state. Dışa aktar.
Başlangıç kodu
// cartReducer fonksiyonunu buraya yazÖrnek çözüm
function cartReducer(state, action) {
switch (action.type) {
case "ADD":
return { ...state, items: [...state.items, action.payload], total: state.total + action.payload.price };
case "REMOVE": {
const items = state.items.filter((i) => i.id !== action.payload.id);
const total = items.reduce((s, i) => s + i.price * i.qty, 0);
return { ...state, items, total };
}
case "CLEAR":
return { items: [], total: 0 };
default:
return state;
}
}
export default cartReducer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ADD aksiyonunda ürün sepette varsa ne yapılır?
- Yeni öğe ekle
- Siler
- Adetini artır Doğru cevap
- Hiçbir şey
Açıklama: Ürün varsa adetini artır.
2 REMOVE yöntemi
REMOVE aksiyonunda ürünü çıkarmak için ____ kullanılır.REMOVE aksiyonunda ürünü çıkarmak için filter kullanılır.Açıklama: filter ile ürün çıkarılır.
3 cartReducer aksiyonlarını eşleştir
| Kavram | Anlamı |
|---|---|
ADD |
ekle/artır |
REMOVE |
filter |
CLEAR |
boşalt |
total |
reduce |