Middleware
- React Native kursu
- İleri seviye
- Ders 59/83
- 5 dk
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.
Başlangıç kodu
import { create } from 'zustand';
// persist ile useTheme store'u tanımlaÖrnek çözüm
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
export const useTheme = create(persist((set) => ({
theme: 'light',
}), { name: 'theme-storage' }));Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 persist parçalarını eşle
| Kavram | Anlamı |
|---|---|
persist |
Middleware |
name |
AsyncStorage anahtarı |
AsyncStorage |
Cihaz deposu |
create |
Store oluşturur |
2 Storage anahtarını yaz
persist((set) => ({ theme: 'light' }), { name: '____' })persist((set) => ({ theme: 'light' }), { name: 'theme-storage' })Açıklama: theme-storage anahtar adıdır.
3 persist ne yapar?
- State'i kalıcı yapar Doğru cevap
- Stilleri değiştirir
- Animasyon oynatır
- Kamera açar
Açıklama: persist state'i AsyncStorage'a yazıp açılışta geri yükler.