Added and configured redux-persist

Client/package-lock.json

@@ -27,7 +27,8 @@
         "react-redux": "9.1.2",
         "react-router": "^6.23.0",
         "react-router-dom": "^6.23.1",
-        "react-toastify": "^10.0.5"
+        "react-toastify": "^10.0.5",
+        "redux-persist": "6.0.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -4745,6 +4746,15 @@
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
     },
+    "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==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",

Client/package.json

@@ -29,7 +29,8 @@
     "react-redux": "9.1.2",
     "react-router": "^6.23.0",
     "react-router-dom": "^6.23.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "redux-persist": "6.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

Client/src/main.jsx

@@ -6,16 +6,19 @@ import { BrowserRouter as Router, HashRouter } from "react-router-dom";
 import theme from "./Utils/Theme.js";
 import { ThemeProvider } from "@mui/material";
 import { Provider } from "react-redux";
-import store from "./store";
+import { persistor, store } from "./store";
+import { PersistGate } from "redux-persist/integration/react";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <Router>
-          <App />
-        </Router>
-      </ThemeProvider>
+      <PersistGate loading={null} persistor={persistor}>
+        <ThemeProvider theme={theme}>
+          <Router>
+            <App />
+          </Router>
+        </ThemeProvider>
+      </PersistGate>
     </Provider>
   </React.StrictMode>
 );

Client/src/store.js

@@ -1,7 +1,33 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import monitorsReducer from "./Features/Monitors/monitorsSlice";
 import authReducer from "./Features/Auth/authSlice";
+import storage from "redux-persist/lib/storage";
+import { persistReducer, persistStore } from "redux-persist";
 
-export default configureStore({
-  reducer: { monitors: monitorsReducer, auth: authReducer },
+const persistConfig = {
+  key: "root",
+  storage,
+};
+
+const rootReducer = combineReducers({
+  monitors: monitorsReducer,
+  auth: authReducer,
 });
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [
+          "persist/PERSIST",
+          "persist/REHYDRATE",
+          "persist/REGISTER",
+        ],
+      },
+    }),
+});
+
+export const persistor = persistStore(store);