Поиск по сайту:

Как сохранить свой магазин Redux


Redux упрощает управление состоянием в сложных приложениях. Поскольку хранилище Redux содержит все состояние вашего приложения, его сохранение позволяет сохранять и восстанавливать сеанс пользователя.

Создание вашего магазина

Мы предполагаем, что вы знакомы с основами Redux.

В этом уроке мы будем использовать простое хранилище с наивным редюсером.

import {createStore} from "redux";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const store = createStore(reducer, state);

Этот тривиальный пример устанавливает основу для магазина Redux, который может отслеживать, вошли ли мы в систему. Большинство пользователей ожидают, что они останутся в системе, когда они вернутся в ваше приложение. На данный момент состояние создается заново каждый раз при загрузке приложения, поэтому пользователи останутся аутентифицированными только в рамках текущего сеанса.

Добавление сохранения Redux

Redux Persist — это популярная библиотека, которая позволяет вам добавлять постоянство в хранилище. Библиотека будет автоматически сохранять хранилище каждый раз при обновлении состояния. Вам не нужно писать какой-либо код сохранения в ваших действиях или редюсерах.

Начните с установки Redux Persist с помощью npm:

npm install redux-persist

Теперь вам нужно подключить библиотеку к вашему магазину. Оберните корневой редюсер с помощью функции Redux Persist persistReducer. Это позволяет Redux Persist проверять действия, которые вы отправляете в свой магазин. Вам также потребуется вызвать persistStore(), чтобы запустить постоянство.

import {createStore} from "redux";
import {persistStore, persistReducer} from "redux-persist";
import storage from "redux-persist/lib/storage";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const persistConfig = {
    key: "root",
    storage
};
 
const persistedReducer = persistReducer(persistConfig, reducer);
 
const store = createStore(persistedReducer, state);
 
const persistor = persistStore(store);

Теперь эта конфигурация готова к использованию. С помощью всего нескольких строк кода мы обеспечили автоматическое сохранение любых изменений состояния Redux. Пользователи перестанут выходить из системы каждый раз, когда перезагружают ваше приложение.

Наш редуктор улучшен с помощью persistReducer(), чтобы включить поддержку постоянства. Затем этот вновь обернутый редуктор передается в createStore() вместо оригинала. Наконец, вызывается persistStore(), передавая экземпляр хранилища, чтобы обеспечить постоянство.

Настройка сохранения Redux

Функция persistReducer() принимает объект конфигурации в качестве своего первого параметра. Вы должны указать свойства key и storage.

key устанавливает имя свойства верхнего уровня в сохраняемом объекте. Состояние вашего магазина будет сохранено как значение этого свойства.

storage определяет используемый механизм хранения. Redux Persist поддерживает несколько различных серверных хранилищ в зависимости от среды. Для использования в Интернете поддерживаются API localStorage и sessionStorage, а также основные файлы cookie. Также доступны опции для React Native, Node.js, Electron и некоторых других платформ.

Вы определяете используемый механизм хранения, импортируя его из пакета. Затем его основной объект, реализующий API, должен быть передан в качестве опции storage в Redux Persist.

Вы можете реализовать свой собственный механизм хранения, чтобы использовать настраиваемый механизм сохраняемости. Создайте объект с помощью методов setItem(), getItem() и removeItem(). Redux Persist является асинхронным, поэтому каждый метод должен возвращать обещание, которое разрешается после завершения операции.

Объект персистор

Объект persistor, возвращаемый из вызовов persistStore(), имеет несколько служебных методов, позволяющих управлять сохраняемостью.

Вы можете приостановить и возобновить сохранение с помощью методов pause() и resume() соответственно. Вы можете принудительно выполнить немедленную запись в механизм хранения с помощью flush(). Это может быть полезно, если вам нужно гарантировать, что ваше состояние сохраняется после определенной операции.

Вы можете удалить все сохраненные данные из механизма хранения с помощью .purge(). В большинстве случаев этого следует избегать — вы должны использовать действие Redux для очистки вашего хранилища, которое затем автоматически распространится на сохраненные данные.

Государственное примирение

Redux Persist поддерживает три различных способа гидратации вашего магазина из постоянного состояния. Гидратация происходит автоматически, когда вы вызываете persistStore() и в механизме хранения обнаруживаются существующие данные. Redux Persist необходимо ввести эти исходные данные в ваш магазин.

Стратегия по умолчанию заключается в объединении объектов глубиной до одного уровня. Любые вложенные объекты не будут объединены — входящие изменения перезапишут все, что уже находится в вашем состоянии.

  • Сохраняемое состояние: {\demo\: {\foo\: \bar\}}
  • Состояние в магазине: {\demo\: {\example\: test\}}
  • Результирующий гидратированный магазин: {\demo\: {\foo\: \bar\}}

При желании вы можете переключиться на слияние объектов до уровней в глубину. Импортируйте новое средство согласования состояний и добавьте его в конфигурацию вашего магазина:

// usual imports omitted
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 
const persistConfig = {
    key: "root",
    storage,
    stateReconciler: autoMergeLevel2
};
 
// store configuration omitted

Вот каким будет результат autoMergeLevel2 при гидратации приведенного выше примера:

  • Сохраняемое состояние: {\demo\: {\foo\: \bar\}}
  • Состояние в магазине: {\demo\: {\example\: test\}}
  • Результирующий гидратированный магазин: {\demo\: {\foo\: \bar\, \example\: \test\}}

Значения свойств demo из двух источников объединяются в гидратации.

Используйте согласователь hardSet, если вы хотите полностью отключить слияние. Это заменит состояние хранилища содержимым механизма хранения. Часто это нежелательно, так как усложняет миграцию — если вы добавите новое начальное свойство в свое состояние, оно будет отключено для существующих пользователей, как только их сеансы заполнятся.

Миграция вашего состояния

Что касается миграции, Redux Persist имеет встроенную поддержку обновления сохраняемого состояния до новой версии. Иногда вы можете заменить свойства более новыми альтернативами. Вы должны быть уверены, что существующим пользователям не придется сбрасывать ваше приложение, чтобы продолжать его использовать.

Миграции настраиваются с помощью конфигурационного ключа migrate. Самый простой подход — передать функцию, которая принимает состояние в качестве параметра и возвращает перенесенное состояние. Вам также необходимо установить ключ конфигурации version, чтобы Redux Persist мог определить, когда необходимы миграции. Каждый раз, когда изменяется версия, будет вызываться ваша функция переноса.

const persistConfig = {
    key: "root",
    storage,
    version: 1,
    migrate: (state) => ({...state, oldProp: undefined, newProp: "foobar"});
};

В качестве альтернативы функциональному подходу вы можете передать объект, который позволяет создавать отдельные функции миграции для каждого шага версии. Это должно быть передано в функцию createMigrate() перед передачей в конфигурацию Redux Persist.

// other imports omitted
import {createMigrate} from "redux-persist";
 
const migrations = {
    1: state => ({...state, extraProp: true}),
    2: state => ({...state, extraProp: undefined, extraPropNew: true})
};
 
const persistConfig = {
    key: "root",
    storage,
    version: 2,
    migrate: createMigrate(migrations)
}

В этом примере мы инициализируем хранилище как версию 2. Если состояние уже существует на устройстве пользователя как версия 0, обе миграции будут выполнены. Если пользователь в настоящее время использует версию 1, будет запущена только последняя миграция.

Применение преобразований

И последнее, что следует упомянуть, это то, что Redux Persist поддерживает использование функций «преобразования». Они добавляются в вашу конфигурацию и позволяют вам управлять данными, которые сохраняются или восстанавливаются.

В документации к библиотеке перечислены несколько популярных преобразований, которые вы можете использовать. Они позволяют вам автоматически сжимать, шифровать или удалять ваше постоянное состояние без необходимости самостоятельно реализовывать какую-либо логику на уровне приложения.

Преобразования указываются в виде массива в вашем объекте конфигурации. Они выполняются в указанном порядке.

const persistStore = {
    key: "root",
    storage,
    transforms: [MyTransformer]
};

Чтобы написать собственный преобразователь, используйте функцию createTransform(). Ему передаются две функции и объект конфигурации:

import {createTransform} from "redux-persist";
 
const MyTransformer = createTransform(
    (inboundState, key) => ({...inboundState, b64: btoa(inboundState.b64)}),
    (outboundState, key) => ({...outboundState, b64: atob(outboundState.b64)}),
    {}
);

В этом примере мы сохраняем свойство b64 нашего состояния как его значение в кодировке Base64. Когда данные сохраняются в хранилище (outboundState), значение кодируется. Он декодируется, когда постоянное состояние гидратируется (inboundState).

Объект конфигурации можно использовать для определения белого списка и черного списка имен редукторов. В этом случае трансформатор будет использоваться только с редукторами, соответствующими этим ограничениям.

Заключение

Redux Persist — мощная библиотека с простым интерфейсом. Вы можете настроить автоматическое сохранение вашего магазина Redux всего за несколько строк кода. Пользователи и разработчики будут благодарны за его удобство.




Все права защищены. © Linux-Console.net • 2019-2024