How to handle RTK in a multipage Next 13 Application

Question

I am using next 13 with RTK.I am using Dispatch on Page.tsx. Page.tsx is rendering Home Page. I set initiall state on home page. But if I refresh or visit my profile page from url, Redux store is not initialized. As it is only initialized when we firm call Homepage present in page.tsx.

Page.tsx:

"use client";
//React
import { useSession } from "next-auth/react";
import { useEffect } from "react";
//Redux
import { useAppSelector, useAppDispatch } from "./Redux/hooks";
import { fetchUsers } from "./Redux/features/user/userSlice";
//Components
import HomePage from "./components/HomePage";
import ReduxProvider from "./components/ReduxProvider";

export default function Home() {
  //Redux
  const user = useAppSelector((state) => state.user);
  const dispatch = useAppDispatch();

  //Session
  const { data: session } = useSession({
    required: true,
  });
  const userEmail = session?.user?.email || "invalid";

  useEffect(() => {
    if (userEmail != "invalid") {
      dispatch(fetchUsers(userEmail));
    }
  }, [userEmail]);

  if (!session) {
    <p>Loading</p>;
  }
  return <HomePage />;
}

Folder structure

app
--page.tsx
--profile
----page.tsx

I want my redux to be initialized in such a way that every page can access it. I have image of project directory below and here are my code for page.tsx && Profile.tsx.