From 5b52fa0b3c215a125c29552c2f7f1e6e417cc2b3 Mon Sep 17 00:00:00 2001
From: Anastacia-Tesli <teslina.anastacia@yandex.ru>
Date: Tue, 1 Aug 2023 21:26:44 +0300
Subject: [PATCH] feat: add redux persist

---
 package-lock.json  | 17 +++++++++++++++++
 package.json       |  1 +
 src/index.tsx      | 17 +++++++++--------
 src/store/index.ts | 15 +++++++++++++--
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 05df3282..dc147609 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "redux-persist": "^6.0.0",
         "sass": "^1.58.3",
         "sass-loader": "^13.2.0"
       }
@@ -14995,6 +14996,15 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "dev": true,
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
@@ -28277,6 +28287,13 @@
         "@babel/runtime": "^7.9.2"
       }
     },
+    "redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "dev": true,
+      "requires": {}
+    },
     "redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
diff --git a/package.json b/package.json
index 884587fb..307b2fcf 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "redux-persist": "^6.0.0",
     "sass": "^1.58.3",
     "sass-loader": "^13.2.0"
   }
diff --git a/src/index.tsx b/src/index.tsx
index a6f8fa74..1802d7d8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,20 +4,21 @@ import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
 import { App } from './components';
-import { store } from './store';
+import { persistor, store } from './store';
+import { PersistGate } from 'redux-persist/integration/react';
 
 import './index.scss';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <StrictMode>
     <Provider store={store}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
+      <PersistGate loading={null} persistor={persistor}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </PersistGate>
     </Provider>
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/src/store/index.ts b/src/store/index.ts
index be0f68e9..0b29798f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,6 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import { persistStore, persistReducer } from 'redux-persist';
+import localStorage from 'redux-persist/lib/storage';
 import { popupSliceReducer } from './popupSlice';
 import { userSliceReducer } from './userSlice';
 import { authSliceReducer } from './authSlice';
@@ -11,8 +13,15 @@ const rootReducer = combineReducers({
   cards: cardsSliceReducer,
 });
 
+const persistConfig = {
+  key: 'root',
+  storage: localStorage,
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
 const store = configureStore({
-  reducer: rootReducer,
+  reducer: persistedReducer,
   /* #TODO: Разобраться serializableCheck с включенным падают ошибки!*/
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
@@ -20,6 +29,8 @@ const store = configureStore({
     }),
 });
 
+const persistor = persistStore(store);
+
 const AppDispatch = store.dispatch;
 
-export { store, AppDispatch };
+export { store, persistor, AppDispatch };