added redux persist

Stephen-Gordon · Jan 31, 2024 · 5f3ec95 · 5f3ec95
1 parent b4414f5
commit 5f3ec95
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/src/GlobalRedux/store.ts b/src/GlobalRedux/store.ts
@@ -1,18 +1,48 @@
 'use client';
 
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import loginReducer from './Features/login/loginSlice';
 import addressReducer from './Features/address/addressSlice';
 import searchReducer from './Features/search/searchSlice';
 import kernalClientSliceReducer from './Features/kernalClient/kernalClientSlice';
+
+// Define RootState type
+type RootState = {
+  login: {
+    value: boolean;
+  };
+  address: {
+    value: string;
+  };
+  search: {
+    value: boolean;
+  };
+  kernalClient: {
+    value: {};
+  };
+};
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+// Combine reducers with RootState type
+const rootReducer = combineReducers<RootState>({
+  login: loginReducer,
+  address: addressReducer,
+  search: searchReducer,
+  kernalClient: kernalClientSliceReducer,
+});
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
 export const store = configureStore({
-  reducer: {
-    login: loginReducer,
-    address: addressReducer,
-    search: searchReducer,
-    kernalClient: kernalClientSliceReducer,
-  },
+  reducer: persistedReducer,
 });
 
-export type RootState = ReturnType<typeof store.getState>;
+export const persistor = persistStore(store);
+
 export type AppDispatch = typeof store.dispatch;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -89,15 +89,17 @@ export default function RootLayout({
     <html>
       <body>
         <Providers>
-          <WagmiProvider config={config!}>
-            <QueryClientProvider client={queryClient}>
-              <nav>
-                <Link href='/search'>Open modal</Link>
-              </nav>
-              <div>{authState && auth}</div>
-              <main>{children}</main>
-            </QueryClientProvider>
-          </WagmiProvider>
+          <PersistGate loading={null} persistor={persistor}>
+            <WagmiProvider config={config!}>
+              <QueryClientProvider client={queryClient}>
+                <nav>
+                  <Link href='/search'>Open modal</Link>
+                </nav>
+                <div>{authState && auth}</div>
+                <main>{children}</main>
+              </QueryClientProvider>
+            </WagmiProvider>
+          </PersistGate>
         </Providers>
       </body>
     </html>