React Academy · Урок

Сохранение состояния с промежуточным ПО persist

Синхронизируйте состояние Zustand с localStorage или sessionStorage с помощью промежуточного ПО persist.

Урок 3 из 413 шагов

«Сохранение состояния с промежуточным ПО persist» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы будете использовать промежуточное ПО persist в Zustand, чтобы автоматически синхронизировать состояние store с localStorage и сохранять его после перезагрузки страницы.

Зачем сохранять состояние?

Без сохранения всё состояние store сбрасывается при обновлении страницы пользователем. Сохранение в localStorage таких данных, как товары в корзине, пользовательские настройки или состояние интерфейса (открытые панели), обеспечивает плавный переход между сеансами.

Промежуточное ПО persist

Оберните вызов create() в persist(). Укажите уникальный ключ хранилища. Zustand автоматически прочитает данные из localStorage при монтировании и запишет их после каждого изменения состояния.
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

Используйте `partialize`, чтобы сохранять только определённые срезы store. Это исключает временные данные, например флаги загрузки, из localStorage.
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

Чтобы сохранять данные только на время сеанса браузера (с удалением при закрытии вкладки), передайте `createJSONStorage(() => sessionStorage)` как параметр хранилища.
import { createJSONStorage } from 'zustand/middleware';

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

Версионирование и миграция

Если структура store меняется (добавляются поля или переименовываются ключи), задайте номер `version` и предоставьте функцию `migrate` для обновления ранее сохранённых данных.
persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Гидратация и SSR

На сервере (Next.js) localStorage не существует. Промежуточное ПО persist в Zustand корректно обрабатывает эту ситуацию: пропускает гидратацию на сервере и повторно гидратирует состояние на клиенте после монтирования.

Обратный вызов onRehydrateStorage

Используйте `onRehydrateStorage`, чтобы выполнить код при восстановлении store из хранилища. Это полезно, например, для запуска вызова API после восстановления токена.
persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

Удаление сохранённого состояния

Вызовите `useMyStore.persist.clearStorage()`, чтобы удалить сохранённые данные из localStorage — это полезно при выходе из системы.
const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

Ограничения размера хранилища

localStorage ограничивает объём данных до 5–10 MB для каждого источника. Не сохраняйте большие наборы данных, например полные каталоги товаров. Сохраняйте только идентификаторы или небольшие объекты конфигурации.

Быстрая проверка

Какой параметр промежуточного ПО persist позволяет исключить определённые поля состояния из сохранения в localStorage?

Итоги

Оберните store Zustand в persist() и укажите ключ name. Используйте partialize, чтобы сохранять только нужные срезы. При изменении структуры store меняйте версию и выполняйте миграцию. При выходе из системы используйте clearStorage().

Далее

Следующий урок: **DevTools Zustand и тестирование store** — Вы подключитесь к Redux DevTools и напишете модульные тесты для действий Zustand.
Можно начать бесплатно

Изучай React с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
88
Уроки
324

Часто задаваемые вопросы

Урок «Сохранение состояния с промежуточным ПО persist» бесплатный?

Да — полный текст урока «Сохранение состояния с промежуточным ПО persist» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение состояния с промежуточным ПО persist»?

Синхронизируйте состояние Zustand с localStorage или sessionStorage с помощью промежуточного ПО persist. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Сохранение состояния с промежуточным ПО persist»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание первого хранилища Zustand
  2. Селекторы и предотвращение лишних повторных рендерингов
  3. Сохранение состояния с промежуточным ПО persist
  4. DevTools Zustand и тестирование хранилищ
← Назад к React Academy