Redux Persist - синхронізація станів між redux і локальним сховищем

Бібліотека Redux Persist вміє автоматично зберігати і завантажувати значення змінних між станами редюсера (глбального сховища) і локальнис сховищем браузера щоб після перезапуску або перезавантаження браузера значення залишились. 1. Встановлюємо бібліотеку Redux Persist

npm install redux-persist

2. Імпортуємо у первинний модуль mail.jsx модуль PersistGate і обгораємо ним головний модуль додатку. В якості параметра передаємо у цей модуль налаштування persistor що будуть налаштовані у головному сховищі редьюсера.

import { render } from 'preact'
import { App } from './app.jsx'
import { Provider } from 'react-redux'
import { persistor, store } from './redux/store'
import { PersistGate } from "redux-persist/integration/react"; //persist - імпортуємо модуль гейта

import './index.css'

render(
    <Provider store={store}>
        <PersistGate persistor={persistor}> //persist - обгортаємо головний модуль
            <App />
        </PersistGate>
    </Provider>
    , document.getElementById('app'))

3. Налаштовуємо головне сховище редьюсера для роботи з redux-persist

import { configureStore } from "@reduxjs/toolkit";
import { contactsReducer } from "./contactsSlice";
import { filtersReducer } from "./filtersSlice";

//persist - імопртуємо необхідні бібліотеки persist redux. З цим не розбирємось - просто копіюємо
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
//persist

//persist - вказуємо які редюсери нам потрібно зберегти в локальному сховищі
const contactsPeristConfig = {
  key: "contactsitems",
  storage,
  whitelist: ["items"], // зберігаємо лише властивість items з головного сховища у локальному сховищі (білий список)
};
//persist

export const store = configureStore({
  reducer: {
    contacts: persistReducer(contactsPeristConfig, contactsReducer), //redux-persist - додаємо до головного сховища збережені дані в локальному сховищі
    filters: filtersReducer
  },

  //persist - конфігурація middleware для redux-persist. З цим не розбирємось - просто копіюємо
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
  //persist

});

//persist - єкспортуємо store з redux-persist
export const persistor = persistStore(store);
//persist