Mempertahankan Status dengan Middleware Persist

Selamat Datang

Mengapa Menyimpan Status?

Perantara persist

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
  )
);

Penyimpanan Sebagian dengan partialize

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
  }
)

Menggunakan sessionStorage

import { createJSONStorage } from 'zustand/middleware';

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

Pemberian Versi dan Migrasi

persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Hidrasi dan SSR

Panggilan Balik onRehydrateStorage

persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

Menghapus Status Tersimpan

const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

Batas Ukuran Penyimpanan

Pemeriksaan Singkat

Ringkasan

Berikutnya