SWR ile veri çekme
- React kursu
- İleri seviye
- Ders 32/56
- 5 dk
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.
Başlangıç kodu
import useSWR from 'swr';
import { useCart } from './useCart';
// ProductPage bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu derste kullanılmayacak hook?
Three hooks are used; external fetch is not.- useSWR
- useCart
- useState
- useFetchExternal Doğru cevap
Açıklama: useFetchExternal bu derste kullanılmaz.
2 addItem çağrısı
<button onClick={() => ____(product)}>Sepete ekle</button><button onClick={() => addItem(product)}>Sepete ekle</button>Açıklama: addItem ürünü sepete ekler.
3 SWR ile veri çekme: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useSWR |
Ürünleri çeker |
useCart |
Sepeti okur |
addItem |
Sepete ekler |
isLoading |
Yüklenme durumu |