Zustand

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.

Örnek çözümü göster

import { create } from 'zustand';

export const useCounter = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Kendini test et

Zustand neyi azaltır?
- İskelet kod miktarını
- Animasyon kalıtesini
- Kamera çözünürlüğünü
- Stillerin sayısını
Cevabı göster

İskelet kod miktarını — Zustand iskelet kod miktarını azaltır.

create çağrısı

export const useCounter = ____((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Cevabı göster

export const useCounter = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }));

Parçayı rolüne eşle

create

Store oluşturur
set

State'i günceller
get

State'i okur
useCounter

Hook olarak kullanılır

Sıradaki ders: create

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler