Merge pull request #3 from iVladyuser/redux_Persist

added persist

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^18.1.0",
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "styled-components": "^6.1.1",
     "web-vitals": "^2.1.3"
   },

src/components/App.jsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { nanoid } from 'nanoid';
 
 import { ContactForm, ContactList, Filter } from 'components';
@@ -12,10 +11,6 @@ const App = () => {
 
   const filter = useSelector(state => state.filterStore);
 
-  useEffect(() => {
-    localStorage.setItem('contacts', JSON.stringify(contacts));
-  }, [contacts]);
-
   const handleDeleteContact = contactId => {
     dispatch(deleteContact(contactId));
   };

src/index.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { store } from './redux/store';
+import { store, persistor } from './redux/store';
+import { PersistGate } from 'redux-persist/integration/react';
+
 import App from 'components/App';
 import './index.css';
 
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+    <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
     </Provider>
   </React.StrictMode>
 );

src/redux/store.js

@@ -1,10 +1,37 @@
 import { configureStore } from '@reduxjs/toolkit';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
 import { contactsReducer } from './contacts/phoneBookSlice';
-import {filterReducer} from './contacts/filterSlice'
+import { filterReducer } from './contacts/filterSlice';
+
+const contactsConfig = {
+  key: 'contacts',
+  storage,
+  // whitelist: ['contacts'],
+  // or blacklist
+};
 
 export const store = configureStore({
   reducer: {
-    contactsStore: contactsReducer,
+    contactsStore: persistReducer(contactsConfig, contactsReducer),
     filterStore: filterReducer,
   },
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
 });
+
+export const persistor = persistStore(store);