Ürün ekleme UI
- React kursu
- Orta seviye
- Ders 20/80
- 5 dk
Ü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.
Başlangıç kodu
import { useContext } from "react";
// ProductCard bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ProductCard hangi context'i kullanır?
- CartDispatchContext Doğru cevap
- CartStateContext
- ThemeContext
- UserContext
Açıklama: ProductCard CartDispatchContext kullanır.
2 ADD aksiyonu
Ürün eklemek için <code>dispatch({ '{ type: "ADD", payload: product }' })</code> çağrılır; product ____ alanına gider.Ürün eklemek için <code>dispatch({ '{ type: "ADD", payload: product }' })</code> çağrılır; product payload alanına gider.Açıklama: product payload'a gider.
3 Ürün ekleme akışını eşleştir
| Kavram | Anlamı |
|---|---|
ProductCard |
ADD |
dispatch |
cartReducer |
CartSummary |
state.total |
CartProvider |
sarar |