redux-persist

redux-persist — это библиотека для сохранения и восстановления состояния Redux в локальном хранилище. Она позволяет сохранять состояние приложения в localStorage, sessionStorage или других хранилищах, что позволяет сохранять данные между перезагрузками страницы или перезапусками приложения.

Основные возможности redux-persist

• Сохранение состояния Redux в локальном хранилище.
• Восстановление состояния при перезагрузке страницы.
• Поддержка различных типов хранилищ (localStorage, sessionStorage и т.д.).
• Гибкая настройка и расширяемость.
• Поддержка шифрования и сжатия данных.

Установка

npm install redux-persist

Или с использованием Yarn:

yarn add redux-persist

Основное использование

Для использования redux-persist, необходимо настроить persistor и обернуть корневой компонент приложения в PersistGate.

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // по умолчанию используется localStorage для web

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 };

Настройка PersistGate

Используйте PersistGate для оборачивания вашего корневого компонента, чтобы дождаться восстановления состояния перед рендерингом приложения.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';
import { store, persistor } from './store';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

Пример конфигурации хранилища

Вы можете настроить persistConfig для использования различных типов хранилищ и управления ключами состояния.

import storageSession from 'redux-persist/lib/storage/session'; // использование sessionStorage

const persistConfig = {
  key: 'root',
  storage: storageSession, // замена localStorage на sessionStorage
  whitelist: ['user'], // только user будет сохранен в хранилище
  blacklist: ['temporaryData'], // temporaryData не будет сохранен
};

Пример использования в компоненте

Компоненты могут использовать состояние Redux как обычно. redux-persist автоматически сохранит изменения в локальном хранилище.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

const Counter = () => {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    

       dispatch(decrement())}>-
      {count}
       dispatch(increment())}>+
    
  );
};

export default Counter;

Шифрование данных

Для дополнительной безопасности вы можете использовать redux-persist-transform-encrypt для шифрования данных перед сохранением их в хранилище.

import createEncryptor from 'redux-persist-transform-encrypt';

const encryptor = createEncryptor({
  secretKey: 'my-super-secret-key',
  onError: function(error) {
    // handle the error
  },
});

const persistConfig = {
  key: 'root',
  storage,
  transforms: [encryptor],
};

Заключение

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