Как работать с Redux-Persist для сохранения состояния в Redux в React.js

Redux — одна из самых популярных библиотек для управления состоянием в приложениях на основе React.js. Однако, по умолчанию Redux не предоставляет возможности сохранять состояние при перезагрузке страницы или закрытии браузера. Для решения этой проблемы используется библиотека Redux-Persist.

Redux-Persist — это библиотека, которая позволяет сохранять и восстанавливать состояние Redux в локальном хранилище браузера. Она автоматически сохраняет состояние приложения при каждом обновлении и восстанавливает его при следующем запуске. Таким образом, пользователь может продолжить работу с приложением с того же места, где он остановился.

Для использования Redux-Persist необходимо выполнить несколько простых шагов. Во-первых, установить пакет с помощью npm или yarn:

npm install redux-persist

или

yarn add redux-persist

Установка Redux-Persist

Для установки Redux-Persist в вашем проекте React.js, выполните следующую команду:

npm install redux-persist

После успешной установки вы можете импортировать Redux-Persist в вашем файле store.js, где находится ваш Redux-сохранитель состояния:

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

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

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

Настройка Redux-Persist

Для начала установим Redux-Persist, выполнив следующую команду:

npm install redux-persist

После установки Redux-Persist необходимо настроить его в нашем Redux-сторе. Для этого мы будем использовать функцию persistReducer из библиотеки Redux-Persist.

Пример настройки Redux-Persist выглядит следующим образом:


import { createStore } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import rootReducer from "./reducers";
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
export { store, persistor };

В примере выше мы создали конфигурацию persistConfig с ключом «root» и использовали redux-persist/lib/storage для хранения состояния в LocalStorage. Затем мы использовали функцию persistReducer, чтобы обернуть наш корневой редюсер (rootReducer) в созданный конфигурацию. Затем мы создали Redux-стор и относящийся к нему Redux-Persistор.

Теперь наш Redux-стор готов для использования Redux-Persist. Мы можем использовать его как обычно, и Redux-Persist автоматически будет сохранять состояние в локальное хранилище при каждом изменении.

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

Использование Redux-Persist в React.js

Для использования Redux-Persist в React.js, вам необходимо выполнить следующие шаги:

  1. Установите необходимые зависимости с помощью команды npm install redux-persist.
  2. Создайте файл persistConfig.js, в котором определите конфигурацию Redux-Persist. Например:
persistConfig.js
import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
const persistConfig = {
key: 'root',
storage,
};
export default (reducer) => persistReducer(persistConfig, reducer);
  1. В вашем файле store.js импортируйте и используйте persistReducer из созданного файла persistConfig.js. Например:
store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
import persistConfig from './persistConfig';
const persistedReducer = persistConfig(rootReducer);
const store = createStore(persistedReducer);
export default store;

Теперь ваше Redux-хранилище будет сохраняться между сеансами пользователей. Для восстановления состояния используйте Redux-Persist при создании корневого компонента вашего приложения.

Например:

import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import store from './store';
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);

Теперь ваше Redux-хранилище будет автоматически сохраняться и восстанавливаться при перезагрузке страницы или при возобновлении сеанса.

Оцените статью