React
Sepet reducer
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.
Örnek çözümü göster
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;
Kendini test et
-
ADD aksiyonunda ürün sepette varsa ne yapılır?
- Yeni öğe ekle
- Siler
- Adetini artır
- Hiçbir şey
Cevabı göster
Adetini artır — Ürün varsa adetini artır.
-
REMOVE yöntemi
REMOVE aksiyonunda ürünü çıkarmak için ____ kullanılır.
Cevabı göster
REMOVE aksiyonunda ürünü çıkarmak için filter kullanılır.
-
cartReducer aksiyonlarını eşleştir
- ADD
- ekle/artır
- REMOVE
- filter
- CLEAR
- boşalt
- total
- reduce
Sıradaki ders: Sepet context
