Сохранение состояния с промежуточным ПО persist
Синхронизируйте состояние Zustand с localStorage или sessionStorage с помощью промежуточного ПО persist.
«Сохранение состояния с промежуточным ПО persist» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Добро пожаловать
Зачем сохранять состояние?
Промежуточное ПО 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 });
};Ограничения размера хранилища
Быстрая проверка
Итоги
Далее
Изучай 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 — локальная установка не требуется.
Все уроки этого курса
- Создание первого хранилища Zustand
- Селекторы и предотвращение лишних повторных рендерингов
- Сохранение состояния с промежуточным ПО persist
- DevTools Zustand и тестирование хранилищ