redux store separation from root layout

Author: Alessandro100

src/app/[locale]/[...slug]/page.tsx

@@ -2,11 +2,18 @@
 
 // This page is temporary to ease the migration to Next.js App Router
 // It will be deprecated once the migration is fully complete
-import { type ReactNode, use } from 'react';
+import { type ReactNode, use, useEffect } from 'react';
 import dynamic from 'next/dynamic';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+import { store } from '../../store/store';
+import { useAppDispatch } from '../../hooks';
+import { resetProfileErrors } from '../../store/profile-reducer';
 
 const App = dynamic(async () => await import('../../App'), { ssr: false });
 
+const persistor = persistStore(store);
+
 interface PageProps {
   params: Promise<{
     locale: string;
@@ -16,7 +23,18 @@ interface PageProps {
 
 export default function Page({ params }: PageProps): ReactNode {
   const { locale } = use(params);
+  const pathKey = use(params).slug?.join('/') ?? '/';
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    // Clean errors from previous session
+    dispatch(resetProfileErrors());
+  }, [dispatch]);
 
   // Pass locale to App so BrowserRouter can use correct basename
-  return <App locale={locale} />;
+  return (
+    <PersistGate loading={null} persistor={persistor}>
+      <App locale={locale} key={pathKey} />;
+    </PersistGate>
+  );
 }

src/app/components/Context.tsx

@@ -1,42 +1,20 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import type ContextProviderProps from '../interface/ContextProviderProps';
 import { Provider } from 'react-redux';
 import { store } from '../store/store';
-import { PersistGate } from 'redux-persist/integration/react';
-import { persistStore } from 'redux-persist';
-import { useAppDispatch } from '../hooks';
-import { resetProfileErrors } from '../store/profile-reducer';
 
-const persistor = persistStore(store);
 /**
- * This component is used to wrap the entire application
- */
-const AppContent: React.FC<ContextProviderProps> = ({ children }) => {
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    // This function will run when the component is first loaded
-    // Clean errros from previous session
-    dispatch(resetProfileErrors());
-  }, []);
-  return (
-    <PersistGate loading={children} persistor={persistor}>
-      {children}
-    </PersistGate>
-  );
-};
-
-/**
- * This component is used to wrap the entire application adding the store provider and reseting the errors from previous session
+ * This component is used to wrap the entire application with Redux Provider
+ * It provides the Redux store to all components in the app
+ * IMPORTANT: This does not include the PersistGate, which is used in the page component to delay rendering until the store is rehydrated
+ * This allows for a fast initial render, but makes it possible for components to access the store before it's fully rehydrated.
+ * This also allows for us to have SSG pages that use Redux. It also allows for these pages to be rendered purely in HTML on the server side without waiting for Redux Persist to rehydrate the store.
+ * Use the `useRehydrated` hook to check rehydration status if needed.
  */
 const ContextProviders: React.FC<ContextProviderProps> = ({ children }) => {
-  return (
-    <Provider store={store}>
-      <AppContent>{children}</AppContent>
-    </Provider>
-  );
+  return <Provider store={store}>{children}</Provider>;
 };
 
 export default ContextProviders;

src/app/components/LogoutConfirmModal.tsx

@@ -10,7 +10,7 @@ import {
   Dialog,
 } from '@mui/material';
 import React from 'react';
-import { useAppDispatch } from '../hooks';
+import { useAppDispatch, useRehydrated } from '../hooks';
 import { logout } from '../store/profile-reducer';
 import { SIGN_OUT_TARGET } from '../constants/Navigation';
 import { useRouter } from 'next/navigation';
@@ -26,6 +26,7 @@ export default function ConfirmModal({
 }: ConfirmModalProps): React.ReactElement {
   const dispatch = useAppDispatch();
   const router = useRouter();
+  const isRehydrated = useRehydrated();
   const confirmLogout = (): void => {
     dispatch(
       logout({
@@ -65,6 +66,7 @@ export default function ConfirmModal({
             color='primary'
             variant='contained'
             data-cy='confirmSignOutButton'
+            disabled={!isRehydrated}
           >
             Confirm
           </Button>

src/app/hooks/index.ts

@@ -8,3 +8,12 @@ import { type RootState, type AppDispatch } from '../store/store';
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = (): AppDispatch => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+// Hook to check if redux-persist has finished rehydrating the store
+// This allows us to display content before the store is fully rehydrated while giving us a way to check rehydration status if needed (e.g. to delay rendering of certain components until rehydration is complete)
+export const useRehydrated = (): boolean => {
+  return useAppSelector((state) => {
+    // Redux-persist adds a _persist key to the state with rehydrated status
+    return state?._persist?.rehydrated ?? false;
+  });
+};