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