React Academy · Ders

Persist Middleware ile Durumu Kalıcı Hâle Getirme

persist middleware'ini kullanarak Zustand durumunu localStorage veya sessionStorage ile eşitleyin.

3. ders / 413 adım

Persist Middleware ile Durumu Kalıcı Hâle Getirme, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste, sayfa yeniden yüklendiğinde varlığını sürdürmesi için store durumunu localStorage ile otomatik olarak eşitlemek üzere Zustand'ın persist ara yazılımını kullanacaksınız.

Durumu Neden Kalıcı Hâle Getirmeli?

Kalıcı hâle getirme olmadan kullanıcı sayfayı yenilediğinde tüm store durumu sıfırlanır. Sepet öğeleri, kullanıcı tercihleri veya kullanıcı arayüzü durumunu (açık paneller gibi) localStorage üzerinde kalıcı hâle getirmek, oturumlar arasında kesintisiz bir deneyim sağlar.

persist Ara Yazılımı

create() çağrınızı persist() ile sarın. Benzersiz bir depolama anahtarı sağlayın. Zustand, bağlama sırasında localStorage içinden otomatik olarak okur ve her durum değişikliğinde yazar.
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
    }),
    { name: 'cart-storage' } // localStorage key
  )
);

partialize ile Kısmi Kalıcılık

Belirli store parçalarını kalıcı hâle getirmek için `partialize` kullanın. Bu, geçici verilerin (yükleme göstergeleri gibi) localStorage'a kaydedilmesini engeller.
persist(
  (set) => ({ user: null, token: null, loading: false, fetch: () => {} }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ user: state.user, token: state.token }),
    // loading and fetch are NOT persisted
  }
)

sessionStorage Kullanma

Yalnızca tarayıcı oturumu boyunca kalıcı olması (sekme kapatıldığında temizlenmesi) için depolama seçeneği olarak `createJSONStorage(() => sessionStorage)` aktarın.
import { createJSONStorage } from 'zustand/middleware';

persist(storeCreator, {
  name: 'session-data',
  storage: createJSONStorage(() => sessionStorage),
})

Sürümleme ve Geçiş

Store şekliniz değiştiğinde (yeni alanlar veya yeniden adlandırılmış anahtarlar eklendiğinde) bir `version` numarası belirleyin ve eski kalıcı verileri yükseltmek için bir `migrate` işlevi sağlayın.
persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Hidrasyon ve SSR

Sunucuda (Next.js) localStorage mevcut değildir. Zustand'ın persist ara yazılımı bunu sorunsuz biçimde yönetir; sunucuda hidrasyonu atlar ve bağlama sonrasında istemcide yeniden hidrasyon yapar.

onRehydrateStorage Geri Çağırması

Store depolamadan geri yüklendiğinde kod çalıştırmak için `onRehydrateStorage` kullanın. Bir belirteç geri yüklendikten sonra API çağrısı başlatmak için kullanışlıdır.
persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

Kalıcı Durumu Temizleme

Kalıcı verileri localStorage içinden kaldırmak için `useMyStore.persist.clearStorage()` çağırın — bu, oturum kapatma akışları için kullanışlıdır.
const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

Depolama Boyutu Sınırları

localStorage, kaynak başına 5–10 MB sınırına sahiptir. Büyük veri kümelerini (örneğin, eksiksiz ürün kataloglarını) kalıcı hâle getirmekten kaçının. Yalnızca tanımlayıcıları veya küçük yapılandırma nesnelerini saklayın.

Hızlı Kontrol

persist ara yazılımındaki hangi seçenek, belirli durum alanlarını localStorage'a kaydedilmekten hariç tutmanızı sağlar?

Özet

Zustand store'unuzu persist() ile sarın ve bir ad anahtarı sağlayın. Yalnızca ilgili parçaları saklamak için partialize kullanın. Store şekli değiştiğinde sürüm oluşturun ve geçiş yapın. Oturum kapatırken clearStorage() kullanın.

Sırada

Sonraki ders: **Zustand DevTools ve Store Testleri** — Redux DevTools'a bağlanacak ve Zustand eylemleri için birim testleri yazacaksınız.
Başlamak ücretsiz

Yapay zeka eğitmeniyle React öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
88
Dersler
324

Sıkça Sorulan Sorular

“Persist Middleware ile Durumu Kalıcı Hâle Getirme” dersi ücretsiz mi?

Evet — “Persist Middleware ile Durumu Kalıcı Hâle Getirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Persist Middleware ile Durumu Kalıcı Hâle Getirme” dersinde ne öğreneceğim?

persist middleware'ini kullanarak Zustand durumunu localStorage veya sessionStorage ile eşitleyin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Persist Middleware ile Durumu Kalıcı Hâle Getirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. İlk Zustand Store'unuzu Oluşturma
  2. Seçiciler ve Gereksiz Yeniden Oluşturmaları Önleme
  3. Persist Middleware ile Durumu Kalıcı Hâle Getirme
  4. Zustand DevTools ve Store'ları Test Etme
← React Academy Sayfasına Dön