การคงสถานะด้วยมิดเดิลแวร์ Persist

ยินดีต้อนรับ

เหตุใดจึงต้องคงสถานะ

มิดเดิลแวร์ 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
  )
);

การคงสถานะบางส่วนด้วย 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
  }
)

การใช้ sessionStorage

import { createJSONStorage } from 'zustand/middleware';

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

การกำหนดเวอร์ชันและการย้ายข้อมูล

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

ไฮเดรชันและ SSR

การเรียกกลับ onRehydrateStorage

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

การล้างสถานะที่คงไว้

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

ขีดจำกัดขนาดพื้นที่จัดเก็บ

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทเรียนถัดไป