create ile store
- React kursu
- İleri seviye
- Ders 26/56
- 4 dk
create ile bir store yazmayı öğrenirsin.
Hook olarak kullanım
Zustand store'u bir hook döner; bileşenlerde bu hook'u bir selector ile çağırırsın. const count = useCounter((s) => s.count) yalnızca count'u okur.
Selector kullanmak, yalnızca ilgili parça değiştiğinde çizimi tetikler. Tüm state değişince bileşen tekrar çizilmez; bu performansı artırır.
Birden çok değer okumak için const { count, increment } = useCounter() yazabilirsin; ama bu, her değişimde çizimi tetikler.
set fonksiyonu
set, store'un state güncelleyicisidir. Yeni bir nesne döndüren bir fonksiyon ya da doğrudan bir nesne alır. set((s) => ({ count: s.count + 1 })) eski state'e dayalı güncelleme yapar.
Zustand set çağrısı otomatik olarak yeni state'i birleştirir; yani { count: 1 } verirsen diğer alanlar korunur.
Bu davranış, klasik React setState'in shallow merge davranışına benzer; tanıdık gelir.
Uygulama useTheme store yaz
Aşağıdaki iskeleti tamamla. create ile useTheme store'u tanımla. State: { theme: 'light', toggle: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })) }. export const useTheme = create(...) ile dışa aktar.
Başlangıç kodu
import { create } from 'zustand';
// useTheme store'unu buraya yazÖrnek çözüm
import { create } from 'zustand';
export const useTheme = create((set) => ({
theme: 'light',
toggle: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
}));Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Selector kullanmanın faydası?
Relevant piece = selector.- Daha az kod yazdırır
- Yalnızca ilgili parça değişince çizimi tetikler Doğru cevap
- CSS sıkıştırır
- Store'u siler
Açıklama: Selector, gereksiz çizimleri önler.
2 set çağrısı
increment: () => ____((s) => ({ count: s.count + 1 }));increment: () => set((s) => ({ count: s.count + 1 }));Açıklama: set, state'i günceller.
3 create ile store: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
selector |
İlgili parça |
set |
State günceller |
get |
State okur |
create |
Store kurar |