Zustand
- React Native kursu
- İleri seviye
- Ders 55/83
- 5 dk
Zustand lightweight state yönetimini öğrenirsin.
Zustand
Zustand, hafif bir state yönetim çerçevesidir. Redux'a göre çok daha az iskelet kodu gerektirir; provider, action type ve reducer yazman gerekmez. Tek dosyada store tanımlanır ve bileşenler doğrudan hook olarak kullanır. Kurulum: npm install zustand.
Bir store oluşturmak için create çağrılır. Dönen değer bir hook'tür; bileşen içinde çağrılarak state okunur. Zustand, küçük ve orta ölçekli React Native projelerinde çok tercih edilir. Karmaşık olmayan API'si sayesinde öğrenmesi hızlıdır.
Store tanımı
Zustand'da store, create çağrısıyla tanımlanır. İşleve bir geri çağrı (callback) verilir; bu geri çağrı set ve get parametreleri alır ve bir nesne döndürür. Dönen nesne, state alanlarını ve action işlevlerini taşır.
Örnek: const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })). Burada count state, increment ise action'dır. set, state'i güncellemek için kullanılır; get ise mevcut state'i okumak için. Dışa aktarmak için export eklemen yeterli.
Uygulama useCounter store'u yaz
Boş dosyayı tamamla. create'i zustand'tan içe aktar. export const useCounter'ı create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) })) ile tanımla.
Başlangıç kodu
import { create } from 'zustand';
// useCounter store'unu tanımlaÖrnek çözüm
import { create } from 'zustand';
export const useCounter = create((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
}));Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zustand neyi azaltır?
- İskelet kod miktarını Doğru cevap
- Animasyon kalıtesini
- Kamera çözünürlüğünü
- Stillerin sayısını
Açıklama: Zustand iskelet kod miktarını azaltır.
2 create çağrısı
export const useCounter = ____((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));export const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));Açıklama: create ile store tanımlanır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
create |
Store oluşturur |
set |
State'i günceller |
get |
State'i okur |
useCounter |
Hook olarak kullanılır |