React
SWR ile veri çekme
SWR ile ürünleri çekip Zustand sepete aktarırsın.
SWR ile ürün çekme
Son derste SWR ile ürünleri çekip Zustand sepete aktaracaksın. useSWR önbellekli veri çeker, addItem ile sepete eklersin.
Bu, gerçek e-ticaret akışının özüdür: veri çek + kullanıcı etkileşimi + state güncelle. Üç parça birlikte çalışır.
SWR'ın otomatik yeniden deneme ve odaklanınca yenileme özellikleri, sepete en son ürünün eklenmesini garanti altına alır.
Tüm akışı birleştirme
Son adımda tüm parçaları birleştirirsin: useSWR ile ürünleri çek, useCart ile addItem al, her ürünün yanına 'Sepete ekle' düğmesi koy.
Düğmeye tıklayınca addItem(product) çağrılır; Zustand sepeti günceller; React otomatik çizimi yeniler. Bu, reaktif programlamanın özüdür.
Bu yapı, küçük bir e-ticaret sayfasının iskeletidir; gerçek projelere kolayca genişletilebilir.
Uygulama Ürün sayfası + sepet
Aşağıdaki iskeleti tamamla. ProductPage bileşeni yaz. useSWR ile '/api/products' çek (fetcher: (url) => fetch(url).then(r => r.json())). useCart'tan addItem al ((s) => s.addItem selector). isLoading ise <p>Yükleniyor</p>. Yoksa <ul> içinde products.map(p => <li key={p.id}>{p.name}<button onClick={() => addItem(p)}>Sepete ekle</button></li>). export default ekle.
Örnek çözümü göster
import useSWR from 'swr';
import { useCart } from './useCart';
function ProductPage() {
const { data: products, isLoading } = useSWR(
'/api/products',
(url) => fetch(url).then((r) => r.json())
);
const addItem = useCart((s) => s.addItem);
if (isLoading) return <p>Yükleniyor</p>;
return (
<ul>
{products.map((p) => (
<li key={p.id}>
{p.name}
<button onClick={() => addItem(p)}>Sepete ekle</button>
</li>
))}
</ul>
);
}
export default ProductPage;
Kendini test et
-
Bu derste kullanılmayacak hook?
Three hooks are used; external fetch is not.
- useSWR
- useCart
- useState
- useFetchExternal
Cevabı göster
useFetchExternal — useFetchExternal bu derste kullanılmaz.
-
addItem çağrısı
<button onClick={() => ____(product)}>Sepete ekle</button>
Cevabı göster
<button onClick={() => addItem(product)}>Sepete ekle</button>
-
SWR ile veri çekme: kavramları eşleştir
- useSWR
- Ürünleri çeker
- useCart
- Sepeti okur
- addItem
- Sepete ekler
- isLoading
- Yüklenme durumu
Sıradaki ders: react-hook-form nedir?
