persistor_-_sinxronizacija_staniv_mizh_redux_i_lokalnim_sxovischem [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Redux Persist - синхронізація станів між redux і локальним сховищем ======
Бібліотека [[https://www.npmjs.com/package/redux-persist|Redux Persist]] вміє автоматично зберігати і завантажувати значення змінних між станами редюсера (глбального сховища) і локальнис сховищем браузера щоб після перезапуску або перезавантаження браузера значення залишились.
1. Встановлюємо бібліотеку Redux Persist
<code>
npm install redux-persist
</code>
2. Імпортуємо у  первинний модуль **mail.jsx** модуль **PersistGate** і обгораємо ним головний модуль додатку. В якості параметра передаємо у цей модуль налаштування **persistor** що будуть налаштовані у головному сховищі редьюсера. 
<code>
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'))

</code>
3. Налаштовуємо головне сховище редьюсера для роботи з redux-persist
<code>
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
</code>