Proje: Sepet yönetimi

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.

Örnek çözümü göster

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;

Kendini test et

Sepet state'inde hangisi yok?
- items
- color
- total
- ADD
Cevabı göster

color — color state'te yok.

Sepet aksiyonu

Sepete ürün eklemek için ____ aksiyonu dispatch edilir.

Cevabı göster

Sepete ürün eklemek için ADD aksiyonu dispatch edilir.

Sepet adımlarını eşleştir

cartReducer

switch
CartProvider

iki context
ProductCard

ADD
CartSummary

total

Sıradaki ders: Sepet reducer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler