React
Ürün ekleme UI
Ürünleri listeleyip sepete ekleme yapan bir panel yazarsın.
Ürün ekleme UI
Son ders ProductCard ve CartSummary bileşenlerini yazacak. Ürün kartı ADD dispatch eder; özet bileşeni state'ten total'i okur.
ProductCard: const dispatch = useContext(CartDispatchContext); ile dispatch alır. Butona tıklanınca dispatch({ '{ type: "ADD", payload: product }' }) yapar.
CartSummary: const state = useContext(CartStateContext); ile state okur. state.total ve state.items.length gösterir. Üç dersin birleştiği yer burasıdır.
Sepet özeti
CartSummary, useContext(CartStateContext) ile state okur. state.items.length ürün sayısını, state.total toplam tutarı verir. İkisini ekrana yazdırır.
State her değiştiğinde (ADD, REMOVE, CLEAR), CartSummary otomatik yeniden çizilir. CartDispatchContext kullanan ProductCard ise state değişiminden etkilenmez.
İşte iki context'in gücü burada görünür: yalnızca okuyan veya yalnızca yazan bileşenler gereksiz çizilmez. Bu, büyük sepet uygulamalarında akıcı deneyim sağlar.
Uygulama ProductCard yaz
Aşağıdaki iskeleti tamamla. ProductCard bileşeni yaz. ({ '{ product }' }) alsın. const dispatch = useContext(CartDispatchContext); ile dispatch al. <div><h3>{ '{ product.name }' }</h3><p>{ '{ product.price }' } TL</p><button onClick={ '{ () => dispatch({ '{ type: "ADD", payload: product }' }) }' }>Ekle</button></div> döndür. Dışa aktar.
Örnek çözümü göster
import { useContext } from "react";
function ProductCard({ product }) {
const dispatch = useContext(CartDispatchContext);
return (
<div>
<h3>{product.name}</h3>
<p>{product.price} TL</p>
<button onClick={() => dispatch({ type: "ADD", payload: product })}>Ekle</button>
</div>
);
}
export default ProductCard;
Kendini test et
-
ProductCard hangi context'i kullanır?
- CartDispatchContext
- CartStateContext
- ThemeContext
- UserContext
Cevabı göster
CartDispatchContext — ProductCard CartDispatchContext kullanır.
-
ADD aksiyonu
Ürün eklemek için <code>dispatch({ '{ type: "ADD", payload: product }' })</code> çağrılır; product ____ alanına gider.
Cevabı göster
Ürün eklemek için <code>dispatch({ '{ type: "ADD", payload: product }' })</code> çağrılır; product payload alanına gider.
-
Ürün ekleme akışını eşleştir
- ProductCard
- ADD
- dispatch
- cartReducer
- CartSummary
- state.total
- CartProvider
- sarar
Sıradaki ders: useMemo nedir?
