Proje: Sepet yönetimi
- React kursu
- Orta seviye
- Ders 17/80
- 4 dk
Sepet yönetim projesinin amacını ve adımlarını gözden geçirirsin.
Proje: Sepet yönetimi
Bu projede adım adım bir sepet yönetimi sistemi kuracağız. Üç derslik proje: sepet reducer, sepet context ve ürün ekleme UI. Her ders bir öncekinin üstüne inşa edilir.
State, useReducer ile yönetilir: { '{ items: [], total: 0 }' }. Aksiyonlar: ADD, REMOVE, CLEAR. Reducer bunları ele alır.
Context, reducer sonucunu tüm bileşenlere dağıtır. Bu, küresel sepet state'inin temiz ve test edilebilir olmasını sağlar. Üç ders bitince gerçek bir e-ticaret akışı elde edilir.
Üç adımlı yapı
İlk ders cartReducer fonksiyonunu yazar: ADD, REMOVE, CLEAR aksiyonlarını switch ile ele alır. Her case yeni bir state nesnesi döndürür.
İkinci ders CartProvider bileşenini yazar: useReducer çağırır, iki context ile sarar. State ve dispatch ayrı context'lerde tutulur; böylece yalnızca dispatch kullanan bileşenler gereksiz çizilmez.
Üçüncü ders ürün listesi ve sepet özeti ekler. Ürün kartları ADD dispatch eder; özet bileşeni state'ten items ve total okur. Bu, üç dersin birleştiği yerdir.
Uygulama Sepet iskeleti
Aşağıdaki iskeleti tamamla. CartApp bileşeni yaz. useReducer(cartReducer, { '{ items: [], total: 0 }' }) çağır; [state, dispatch] olarak çöz. <main><h1>Sepet</h1><p>{ '{ state.total }' } TL</p></main> döndür. Dışa aktar.
Başlangıç kodu
import { useReducer } from "react";
// CartApp bileşenini buraya yazÖrnek çözüm
import { useReducer } from "react";
function CartApp() {
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
return (
<main>
<h1>Sepet</h1>
<p>{state.total} TL</p>
</main>
);
}
export default CartApp;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sepet state'inde hangisi yok?
- items
- color Doğru cevap
- total
- ADD
Açıklama: color state'te yok.
2 Sepet aksiyonu
Sepete ürün eklemek için ____ aksiyonu dispatch edilir.Sepete ürün eklemek için ADD aksiyonu dispatch edilir.Açıklama: ADD aksiyonu ürün ekler.
3 Sepet adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
cartReducer |
switch |
CartProvider |
iki context |
ProductCard |
ADD |
CartSummary |
total |