Middleware

Zustand middleware (persist) öğrenirsin.

Middleware (persist)

Zustand persist middleware'ü, state'i kalıcı yapar; uygulama kapansa bile değer korunur. AsyncStorage ile cihazda saklanır ve açılışta otomatik geri yüklenir. Kullanıcı ayarları (tema, dil), sepet veya login durumu için idealdir.

Kullanımı: persist((set) => ({...}), { name: 'storage-key' }). name alanı, AsyncStorage anahtarıdır. Persist, store'u sarmalar ve her state değişiminde AsyncStorage'a yazar. Açılışta ise kayıtlı değeri okuyup state'i başlatır.

persist ile store

Persist kullanırken create'in içine persist çağrısı sarılır. Örnek: create(persist((set) => ({ theme: 'light' }), { name: 'theme-storage' })). Burada theme-storage anahtarı AsyncStorage'da kullanılır.

React Native'de AsyncStorage seçenekleri arasında @react-native-async-storage/async-storage yaygındır. Persist varsayılan olarak tarayıcı localStorage'ını kullanır; bu yüzden React Native'de storage seçeneğiyle özel depo vermek gerekir. Bu ayar olmadan persist çalışmaz.

Uygulama Kalıcı tema store'u

useTheme store'u tanımla. persist'i zustand/middleware'den içe aktar. create(persist((set) => ({ theme: 'light' }), { name: 'theme-storage' })) ile tanımla. export const ile dışa aktar.

Örnek çözümü göster

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useTheme = create(persist((set) => ({
  theme: 'light',
}), { name: 'theme-storage' }));

Kendini test et

persist parçalarını eşle

persist

Middleware
name

AsyncStorage anahtarı
AsyncStorage

Cihaz deposu
create

Store oluşturur

Storage anahtarını yaz

persist((set) => ({ theme: 'light' }), { name: '____' })

Cevabı göster

persist((set) => ({ theme: 'light' }), { name: 'theme-storage' })

persist ne yapar?
- State'i kalıcı yapar
- Stilleri değiştirir
- Animasyon oynatır
- Kamera açar
Cevabı göster

State'i kalıcı yapar — persist state'i AsyncStorage'a yazıp açılışta geri yükler.

Sıradaki ders: Özet - Zustand

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler