create ile store

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.

Örnek çözümü göster

import { create } from 'zustand';

export const useTheme = create((set) => ({
  theme: 'light',
  toggle: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
}));

Kendini test et

Selector kullanmanın faydası?
```
Relevant piece = selector.
```
- Daha az kod yazdırır
- Yalnızca ilgili parça değişince çizimi tetikler
- CSS sıkıştırır
- Store'u siler
Cevabı göster

Yalnızca ilgili parça değişince çizimi tetikler — Selector, gereksiz çizimleri önler.

set çağrısı

increment: () => ____((s) => ({ count: s.count + 1 }));

Cevabı göster

increment: () => set((s) => ({ count: s.count + 1 }));

create ile store: kavramları eşleştir

selector

İlgili parça
set

State günceller
get

State okur
create

Store kurar

Sıradaki ders: Seçici kullanımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler