Zustand sepet store
- React kursu
- İleri seviye
- Ders 31/56
- 5 dk
Zustand ile bir sepet store'u yazarsın.
Zustand'a taşıma
Bu derste aynı sepet mantığını Zustand'a taşıyacaksın. create ile store yaz, addItem action'ını tanımla; bileşenler useCart hook'u ile erişir.
Zustand, Redux gibi Provider gerektirmez; store modül seviyesinde yaşar. Bu, kodu daha kısa ve anlaşılır yapar.
Aynı mantığın farklı kütüphanelerle çözümünü görmek, state yönetimini derinden kavramanı sağlar.
useCart store
Zustand store, bir hook olarak dışa aktarılır. Bileşenlerde const items = useCart((s) => s.items) ile sepeti okur, const addItem = useCart((s) => s.addItem) ile action alırsın.
set fonksiyonu, yeni state'i otomatik birleştirir; set((s) => ({ items: [...s.items, payload] })) eski listeye yeni öğe ekler.
Zustand, RTK'nin immer bağımlılığına benzer şekilde immutability'i otomatik sağlar; spread yazmak zorunda değilsin.
Uygulama useCart store yaz
Aşağıdaki iskeleti tamamla. create ile useCart store'u tanımla. State: { items: [], addItem: (product) => set((s) => ({ items: [...s.items, product] })) }. export const useCart = create(...) ile dışa aktar.
Başlangıç kodu
import { create } from 'zustand';
// useCart store'unu buraya yazÖrnek çözüm
import { create } from 'zustand';
export const useCart = create((set) => ({
items: [],
addItem: (product) => set((s) => ({ items: [...s.items, product] })),
}));Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zustand'ın Redux'a avantajı?
No provider = Zustand.- Daha hızlı çalışır
- Daha çok kod yazar
- Provider gerektirmez Doğru cevap
- Yalnızca test için
Açıklama: Zustand Provider gerektirmez.
2 addItem action
addItem: (product) => ____((s) => ({ items: [...s.items, product] }));addItem: (product) => set((s) => ({ items: [...s.items, product] }));Açıklama: set, state'i günceller.
3 Zustand sepet store: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
create |
Store kurar |
useCart |
Hook döner |
set |
State günceller |
selector |
İlgili parça |