redux-persist

package.json

@@ -14,6 +14,7 @@
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
     "styled-components": "^6.0.7",
     "web-vitals": "^2.1.3"
   },

src/components/App.jsx

@@ -8,8 +8,8 @@ import MainTitle from './MainTitle/MainTitle';
 import { addContact } from 'redux/contacts/contactsSlice';
 
 export const App = () => {
-  const CONTACTS = JSON.parse(localStorage.getItem('CONTACTS'));
-
+  const CONTACTS = JSON.parse(localStorage.getItem('persist:root'));
+  console.log('CONTACTS', CONTACTS);
   // const [contacts, setContacts] = useState(CONTACTS ?? []);
   const [isInitializedTemplate, setIsInitializedTemplate] = useState(
     CONTACTS && CONTACTS.length > 0 ? true : false
@@ -18,10 +18,9 @@ export const App = () => {
 
   const dispatch = useDispatch();
   const contacts = useSelector(({ contacts }) => contacts);
-  // console.log('contactsSlice', contacts);
 
   // useEffect(() => {
-  //   //якщо в пустий локал сторедж задати таймер 3 (використовується для відображення таймеру зворотнього відліку на сторінці),
+  //   //якщо пустий локал сторедж => тоді задати таймер 3 (використовується для відображення таймеру зворотнього відліку на сторінці),
   //   // і запустити setTimout => завантажить шаблон контактів і виведе на екран
 
   //   if (!isInitializedTemplate) {
@@ -50,14 +49,12 @@ export const App = () => {
   }, [contacts]);
 
   const addNewContacts = (name, number) => {
-    const showAlert = true;
+    const noClearInputForm = true;
     const similarElement = element => element.name === name;
     if (contacts.find(similarElement)) {
       alert(name + ' is already in contacts.');
-      return showAlert;
+      return noClearInputForm;
     }
-
-    // setContacts(prevState => [{ id: nanoid(), name, number }, ...prevState]);
     dispatch(addContact({ name, number }));
   };
 
@@ -68,10 +65,7 @@ export const App = () => {
       <MainTitle title="Contacts" />
       <Filter />
       {true ? (
-        <ContactList
-        // contacts={filterContacts()}
-        // onButtonDelete={handlerButtonDelete}
-        />
+        <ContactList />
       ) : (
         <>
           <p>

src/index.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { PersistGate } from 'redux-persist/integration/react';
 import { Provider } from 'react-redux';
-import { store } from 'redux/store';
+import store, { persistor } from 'redux/store';
 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/contacts/contactsSlice.js

@@ -3,7 +3,7 @@ import contactsTemplate from '../../data/contactsTemplate.json';
 
 const contactsSlice = createSlice({
   name: 'contacts',
-  initialState: [...contactsTemplate],
+  initialState: [],
   reducers: {
     addContact(state, { payload }) {
       return [{ id: nanoid(), ...payload }, ...state];

src/redux/store.js

@@ -1,10 +1,40 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import contactsSliceReducer from './contacts/contactsSlice';
 import filterSliceReducer from './filterSlice.js/filterSlice';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 
-export const store = configureStore({
-  reducer: {
-    contacts: contactsSliceReducer,
-    filter: filterSliceReducer,
-  },
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['contacts'],
+};
+
+const rootReducer = combineReducers({
+  contacts: contactsSliceReducer,
+  filter: filterSliceReducer,
 });
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+
+export const persistor = persistStore(store);
+export default store;