Redux Persist – библиотека для сохранения состояния Redux между перезагрузками страницы и закрытием браузера. Она решает практическую задачу: данные из store не теряются при обновлении приложения, что особенно полезно для авторизации, пользовательских настроек, содержимого корзины и промежуточных шагов форм. Persist работает как надстройка над Redux, перехватывая обновления store и сериализуя выбранные части состояния в постоянное хранилище.
Библиотека поддерживает несколько адаптеров хранения: localStorage, sessionStorage, IndexedDB, а также асинхронные движки для React Native. Выбор хранилища влияет на объём данных, скорость чтения и ограничения по синхронности. Для браузера чаще применяют localStorage с лимитом около 5 МБ, тогда как IndexedDB подходит для крупных структур и сложных сценариев.
Ключевой элемент настройки – объект persistConfig. В нём задаются имя ключа, тип storage, а также правила фильтрации. Списки whitelist и blacklist позволяют точно указать, какие срезы состояния подлежат сохранению. Это снижает размер сохранённых данных и исключает попадание временных или чувствительных значений, например флагов загрузки или ошибок запросов.
При инициализации приложения Persist восстанавливает состояние до создания интерфейса. Для этого используется PersistGate, который откладывает рендер до завершения чтения из хранилища. Такой подход предотвращает рассинхронизацию UI и store. Для сложных случаев применяют трансформации: они дают возможность изменять структуру данных при сохранении и восстановлении, что упрощает миграции состояния при обновлении версии приложения.
Redux Persist: что это и как хранится состояние
Redux Persist – инструмент для сохранения части Redux store во внешнем хранилище с последующим восстановлением при повторном запуске приложения. Он встраивается между редьюсерами и хранилищем данных, отслеживает изменения состояния и сериализует выбранные срезы без ручной логики сохранения.
Механизм работы строится вокруг обёртки persistReducer. Она принимает конфигурацию и исходный редьюсер, после чего управляет процессами записи и чтения. При каждом обновлении store Persist сравнивает состояние с настройками фильтрации и записывает только разрешённые ключи.
Данные хранятся в выбранном адаптере storage. В веб-приложениях применяются:
- localStorage – синхронное API, подходит для небольших объёмов данных, доступ сохраняется после закрытия браузера;
- sessionStorage – данные живут до закрытия вкладки, используется для временного состояния;
- IndexedDB – асинхронное хранилище для крупных структур и массивов.
Структура сохраняемого состояния зависит от параметров persistConfig. На практике рекомендуется явно ограничивать набор данных:
- использовать whitelist для сохранения конкретных редьюсеров;
- исключать сетевые статусы, ошибки и вычисляемые значения;
- хранить только сериализуемые типы без функций и классов.
Восстановление состояния происходит до отображения интерфейса. Компонент PersistGate блокирует рендер до завершения чтения из storage, что исключает ситуацию, когда UI отображает значения по умолчанию вместо сохранённых данных.
Для изменения формата данных применяются трансформации. Они позволяют:
- очищать устаревшие поля;
- приводить структуру к новой схеме;
- разделять данные для записи и восстановления.
При работе с чувствительной информацией Persist используют совместно с шифрованием или полностью исключают такие данные из конфигурации. Это снижает риск утечки при доступе к storage через инструменты разработчика или сторонние скрипты.
Назначение Redux Persist и задачи сохранения состояния
Redux Persist применяется для сохранения данных Redux store за пределами жизненного цикла страницы. Основное назначение библиотеки – исключить потерю состояния при обновлении вкладки, закрытии браузера или повторном открытии приложения без повторных запросов к серверу.
Практическая задача Persist – удержание пользовательского контекста. К таким данным относят токены авторизации, параметры интерфейса, выбранный язык, содержимое корзины, результаты пошаговых форм. Без сохранения эти данные обнуляются при каждом перезапуске, что ухудшает пользовательский опыт и увеличивает нагрузку на API.
Redux Persist решает задачу выборочного хранения. Сохраняется не весь store, а только указанные редьюсеры. Это снижает объём данных, предотвращает запись временных флагов и исключает состояния, которые должны формироваться заново, например статусы загрузки или ошибки запросов.
Отдельная задача – синхронизация восстановления состояния с инициализацией интерфейса. Persist загружает данные из хранилища до первого рендера, что устраняет расхождения между UI и фактическим состоянием store. Без этого возможны кратковременные отображения значений по умолчанию.
Библиотека также используется для контроля структуры данных во времени. Через трансформации и версионирование состояния можно адаптировать сохранённые данные под обновлённую схему store, очищать устаревшие поля и предотвращать ошибки после релизов.
Redux Persist не предназначен для хранения чувствительной информации в открытом виде. Его назначение – кэширование клиентского состояния. Для секретных данных применяют исключение из конфигурации или дополнительную обработку перед записью в хранилище.
Подключение библиотеки и базовая инициализация стора
Для работы с сохранением состояния требуется установить пакет redux-persist совместно с Redux. Библиотека не заменяет стандартный store, а расширяет его за счёт дополнительного слоя, который управляет записью и восстановлением данных.
Инициализация начинается с создания конфигурации Persist. В ней задаётся уникальный ключ, тип хранилища и правила отбора данных. Для браузера чаще применяют адаптер на базе localStorage. Такой вариант подходит для строковых и небольших объектных структур, которые сериализуются в JSON.
Следующий шаг – обёртка корневого редьюсера через persistReducer. Она принимает конфигурацию и исходный редьюсер, после чего возвращает модифицированную версию, способную реагировать на события восстановления и очистки состояния.
Store создаётся стандартным способом, но на основе persist-редьюсера. После этого инициализируется объект persistor, который управляет процессами чтения из хранилища и записи обновлений. Этот объект используется отдельно от store и не участвует в логике редьюсеров.
На уровне интерфейса подключается PersistGate. Он принимает persistor и блокирует рендер компонентов до завершения загрузки сохранённых данных. Это устраняет отображение начального состояния вместо актуального содержимого store.
В базовой конфигурации рекомендуется сохранять только стабильные данные. Для этого в persistConfig указывают whitelist с именами редьюсеров, которые не зависят от текущих сетевых запросов и не пересчитываются при каждом запуске приложения.
Использование persistReducer для обёртки редьюсеров
persistReducer – функция, которая связывает Redux и механизм сохранения состояния. Она принимает объект конфигурации Persist и обычный редьюсер, возвращая модифицированную версию, реагирующую на служебные действия восстановления и очистки данных.
Обёртка добавляет в поток обработки экшенов специальные события, такие как REHYDRATE. В момент их получения редьюсер получает данные из хранилища и объединяет их с начальным состоянием. Это происходит до того, как приложение начнёт активно работать с store.
persistReducer применяется на уровне корневого редьюсера или отдельных его частей. При оборачивании всего rootReducer сохраняется единая структура состояния. При точечном использовании можно контролировать сохранение только конкретных веток store без дополнительной фильтрации.
Поведение persistReducer определяется параметрами конфигурации. Ключ key задаёт пространство имён в хранилище, storage отвечает за адаптер записи, а поля whitelist и blacklist управляют тем, какие редьюсеры участвуют в сохранении.
Для корректной работы редьюсеры должны возвращать сериализуемое состояние. Объекты с методами, экземпляры классов и функции не восстанавливаются корректно и приводят к потере данных после перезагрузки.
При изменении структуры store persistReducer используют совместно с трансформациями или версионированием. Это позволяет адаптировать сохранённые данные к новой схеме и избежать ошибок при чтении устаревшего состояния.
persistStore и запуск процесса восстановления данных
persistStore инициирует процесс восстановления состояния из выбранного хранилища. Он принимает store и управляет чтением сохранённых данных, их десериализацией и отправкой соответствующих событий в редьюсеры.
На практике persistStore создаёт объект persistor, который отслеживает асинхронные операции восстановления. Этот объект используется для управления жизненным циклом состояния: можно запускать повторное чтение, очищать хранилище или подписываться на завершение процесса.
В момент восстановления store получает экшен REHYDRATE. Редьюсеры объединяют текущие значения с сохранёнными, что гарантирует непротиворечивое состояние без потери данных. Этот шаг особенно важен для сложных приложений с многопользовательскими настройками или пошаговыми формами.
Для синхронизации рендера UI используется компонент PersistGate. Он блокирует отображение компонентов до завершения процесса восстановления, предотвращая кратковременное отображение начального состояния и рассинхронизацию интерфейса с данными store.
Рекомендуется комбинировать persistStore с фильтрацией данных через whitelist или blacklist, чтобы восстанавливались только актуальные и сериализуемые части состояния. Это уменьшает нагрузку на хранилище и исключает появление некорректных значений после восстановления.
Выбор хранилища: localStorage, sessionStorage, AsyncStorage
Выбор хранилища для Redux Persist напрямую влияет на объём сохраняемых данных, скорость доступа и жизненный цикл состояния. Библиотека поддерживает несколько адаптеров, подходящих для веб-приложений и мобильных платформ.
Основные варианты хранения:
| Хранилище | Тип доступа | Срок жизни данных | Особенности |
|---|---|---|---|
| localStorage | синхронный | постоянно до очистки браузером | Лимит около 5 МБ, простое API, данные доступны между вкладками |
| sessionStorage | синхронный | до закрытия вкладки | Данные изолированы для каждой вкладки, подходят для временных сессий |
| AsyncStorage | асинхронный | постоянно на устройстве | Используется в React Native, поддерживает большие объёмы, асинхронный API |
Выбор зависит от сценария использования. Для веб-приложений с небольшим объёмом состояния чаще применяют localStorage. Если данные не должны сохраняться после закрытия вкладки, используют sessionStorage. В мобильных приложениях и при больших объёмах предпочтителен AsyncStorage.
При использовании любого хранилища необходимо учитывать сериализацию состояния в JSON. Несериализуемые объекты, функции или классы не сохраняются и вызывают ошибки при восстановлении данных.
Вопрос-ответ:
Что такое Redux Persist и зачем он нужен?
Redux Persist — библиотека для сохранения состояния Redux между перезагрузками страницы или закрытием приложения. Она позволяет сохранять выбранные части store во внешнем хранилище, чтобы данные пользователя, настройки интерфейса или содержимое корзины не терялись при обновлении приложения.
Какие типы хранилищ поддерживает Redux Persist?
Для веб-приложений доступны localStorage и sessionStorage, которые работают синхронно. LocalStorage хранит данные постоянно до очистки браузером, а sessionStorage — до закрытия вкладки. Для React Native используется AsyncStorage, позволяющий асинхронно работать с большими объёмами данных на устройстве.
Как настроить сохранение только части состояния Redux?
С помощью объекта persistConfig можно указать, какие редьюсеры сохранять. Параметры whitelist и blacklist задают включение или исключение определённых веток store. Это позволяет хранить только нужные данные, избегая сохранения временных флагов или сетевых ошибок.
Что делает persistReducer и как его использовать?
persistReducer оборачивает обычный редьюсер и добавляет логику записи и восстановления состояния. Он принимает конфигурацию Persist и исходный редьюсер, возвращая модифицированный редьюсер, который обрабатывает специальные экшены, такие как REHYDRATE, для восстановления данных из хранилища.
Как гарантировать, что UI не отобразит старое состояние при загрузке данных?
Для синхронизации используют компонент PersistGate. Он принимает объект persistor, созданный через persistStore, и задерживает рендер компонентов до завершения восстановления состояния. Это предотвращает рассинхронизацию между UI и store и исключает кратковременное отображение значений по умолчанию.
Можно ли сохранять только часть Redux store с помощью Redux Persist?
Да, для этого используют объект persistConfig, где указывают поля whitelist и blacklist. Whitelist определяет, какие редьюсеры сохранять, а blacklist исключает ненужные. Такой подход позволяет хранить только данные, которые действительно нужны после перезагрузки, например авторизационные токены или настройки интерфейса, и не сохранять временные состояния, ошибки или статусы загрузки.
Как происходит восстановление состояния при перезагрузке приложения?
Восстановление инициируется с помощью функции persistStore, которая создаёт объект persistor. Persistor считывает данные из выбранного хранилища и отправляет экшен REHYDRATE в редьюсеры. Компонент PersistGate блокирует рендер компонентов до завершения восстановления, предотвращая рассинхронизацию UI и store. Это обеспечивает корректное отображение сохранённых данных сразу после загрузки приложения.
Загрузка...
