advanced
Persist middleware
Сохраняйте выбранное клиентское состояние с миграциями, обработкой гидратации и решениями по безопасности хранилища.
Middleware `persist` записывает часть store в хранилище (localStorage, sessionStorage, async-адаптеры) и восстанавливает при загрузке. Настройте `name`, `partialize` для whitelist полей и `version` + `migrate` при смене схемы.
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
const useSettings = create(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme }),
}),
{
name: 'settings',
partialize: (s) => ({ theme: s.theme }),
version: 1,
},
),
);
При SSR обрабатывайте расхождение hydration: отложенный render или `onRehydrateStorage`. Не персистьте токены и PII без шифрования и threat model.
Компромисс: восстановленный UX между сессиями против лимитов хранилища, миграций и утечки чувствительных полей.
На интервью: что персистить, стратегия миграций, flash при hydration.
Типовые ошибки: персист всего store включая actions, нет version при смене формы, устаревший персист перебивает серверную истину.
Чеклист:
- partialize только безопасные поля.
- Версионированные миграции.
- UX rehydration при SSR.
- Серверное состояние всё равно refetch после hydrate.