updated persistant store

package.json

@@ -31,6 +31,7 @@
     "react-i18next": "^13.2.2",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",
     "styled-components": "^6.0.8",
     "tailwindcss": "3.3.3",

src/pages/404.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Custom404 = () => {
+    return (
+        <div>
+            <h1>404 - Page Not Found</h1>
+            <p>Sorry, the page you are looking for cannot be found.</p>
+        </div>
+    );
+};
+
+export default Custom404;

src/pages/_app.tsx

@@ -1,43 +1,28 @@
 // src/pages/_app.tsx
 import { AppProps } from 'next/app';
-import { useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider as ReduxProvider } from 'react-redux';
 import { AppThemeProvider } from '../themes/ThemeContext';
+import { PersistGate } from 'redux-persist/integration/react';
+import { lazy, Suspense } from 'react';
 import { Base } from '@/templates/base';
-
-// Import your Redux store
-import store from '../redux/store';
+import store, { persistor } from '../redux/store';
 
 // Import your i18n configuration
 import i18n from '../i18n';
 
 const BoilerplateApp = ({ Component, pageProps }: AppProps) => {
-  // Register the service worker on app mount
-  useEffect(() => {
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        navigator.serviceWorker
-          .register('/service-worker.js')
-          .then((registration) => {
-            console.log('Service Worker registered with scope:', registration.scope);
-          })
-          .catch((error) => {
-            console.error('Service Worker registration failed:', error);
-          });
-      });
-    }
-  }, []);
-
   return (
     <ReduxProvider store={store}>
-      <AppThemeProvider>
-        <I18nextProvider i18n={i18n}>
-          <Base>
-            <Component {...pageProps} />
-          </Base>
-        </I18nextProvider>
-      </AppThemeProvider>
+      <PersistGate loading={null} persistor={persistor}>
+        <AppThemeProvider>
+          <I18nextProvider i18n={i18n}>
+            <Base>
+              <Component {...pageProps} />
+            </Base>
+          </I18nextProvider>
+        </AppThemeProvider>
+      </PersistGate>
     </ReduxProvider>
   );
 };

src/pages/_error.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { NextPageContext } from 'next';
+
+type Props = {
+  statusCode: number;
+};
+
+const ErrorPage = ({ statusCode }: Props) => {
+  if (statusCode === 404) {
+    return (
+      <div>
+        <h1>404 - Page Not Found</h1>
+        <p>Sorry, the page you are looking for cannot be found.</p>
+      </div>
+    );
+  } else if (statusCode === 500) {
+    return (
+      <div>
+        <h1>500 - Internal Server Error</h1>
+        <p>Sorry, there was a problem with the server.</p>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <h1>
+          {statusCode
+            ? `An error ${statusCode} occurred on server`
+            : 'An error occurred on client'}
+        </h1>
+        <p>Sorry, there was a problem with the server.</p>
+      </div>
+    );
+  }
+};
+
+ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+export default ErrorPage;

src/redux/rootReducer.ts

@@ -1,13 +1,20 @@
 // src/redux/rootReducer.ts
-
+import {persistReducer} from 'redux-persist';
+import storage from "redux-persist/lib/storage";
 import { combineReducers } from '@reduxjs/toolkit';
 import postReducer from './posts/reducer'; /// Import your postReducer
 // Import other reducers as needed
 
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: []
+};
+
 const rootReducer = combineReducers({
   // Add your individual reducers here
   posts: postReducer, // Assuming you have a 'posts' slice in your state
   // Add more reducers for other parts of your app here
 });
 
-export default rootReducer;
+export default persistReducer(persistConfig, rootReducer)

src/redux/store.tsx

@@ -2,6 +2,7 @@
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from './rootReducer'; // Import your root reducer
 import thunk from 'redux-thunk';
+import { persistStore } from 'redux-persist';
 
 const store = configureStore({
   reducer: rootReducer,
@@ -12,4 +13,6 @@ const store = configureStore({
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
+export const persistor = persistStore(store);
+
 export default store;