persist setup

Author: danretegan

src/index.js

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom/client';
 import App from './components/App';
 import './index.css';
 import { Provider as ReduxProvider } from 'react-redux';
-import persistor from './redux/store.js';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistor, store } from './redux/store';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <ReduxProvider store={persistor}>
-    <App />
+  <ReduxProvider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <App />
+    </PersistGate>
   </ReduxProvider>
 );

src/redux/store.js

@@ -1,7 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { contactsReducer } from './slices/contactsSlice';
 import { filterReducer } from './slices/filterSlice';
 
+import { persistReducer, persistStore } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
 /**
  * In store, pentru fiecare "particica" din state-ul aplicatiei, o sa asignam un reducer care se va ocupa exclusiv de logica pentru acea "particica".
  *
@@ -12,11 +15,25 @@ import { filterReducer } from './slices/filterSlice';
  * }
  */
 
-const store = configureStore({
-  reducer: {
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(
+  persistConfig,
+  combineReducers({
     contacts: contactsReducer,
     filter: filterReducer,
-  },
+  })
+);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
-export default store;
+export const persistor = persistStore(store);