persist state placed

package-lock.json

@@ -27,6 +27,7 @@
         "react-redux": "^9.1.0",
         "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
+        "redux-persist": "^6.0.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
@@ -15178,6 +15179,14 @@
       "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==",
+      "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",

package.json

@@ -22,6 +22,7 @@
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -9,14 +9,16 @@ import Products from './components/catelog/Products';
 import Product from './components/catelog/Product';
 import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
 import { Provider } from 'react-redux';
-import store from './reduxstore/store';
+import store,{persistor} from './reduxstore/store';
 import Navbar from './components/Navbar/Navbar';
 import Footer from './components/Footer/Footer';
+import { PersistGate } from 'redux-persist/integration/react';
  
 function App() {
  
   return (
  <Provider store={store}>
+  <PersistGate loading={null} persistor={persistor}>
       <BrowserRouter>
       <Navbar/>
      <Routes>
@@ -31,6 +33,7 @@ function App() {
         </Routes>
         <Footer/>
       </BrowserRouter>
+      </PersistGate>
  </Provider>
   );
 }

src/components/Cart/Cart.tsx

@@ -17,7 +17,7 @@ const Cart = memo(() => {
         }else{
             dispatch(fetchCartItems(user.userId))
         }
-    },[cartItems])
+    },[])
     const handleCartItems=()=>{
         dispatch(fetchCartItems(user.userId))
     }

src/reduxstore/store.ts

@@ -3,21 +3,30 @@ import cartReducer,{CartStateType} from './cartSlice'
 import productsReducer,{ProductsStateType} from './productsSlice'
 import usersReducer,{UsersStateType} from './usersSlice'
 import userDetailsslice,{UserDetailsType} from './userDetailsslice'
+import storage from 'redux-persist/lib/storage';
+import { persistReducer, persistStore } from 'redux-persist';
 
+const persistConfig={
+    key: "root", 
+    storage
+}
 export type RootState= {
     products:ProductsStateType;
     cart: CartStateType;
     users: UsersStateType;
     userDetails:UserDetailsType
   }
+const persistUserDetailsReducer=persistReducer(persistConfig,userDetailsslice)
 const store=configureStore({
     reducer:{
         products:productsReducer,
         cart: cartReducer,
         users: usersReducer,
-        userDetails:userDetailsslice
+        userDetails:persistUserDetailsReducer
     },
 })
 
+export const  persistor = persistStore(store);
+
 
 export default store
\ No newline at end of file