hi every one i get an idea to create application with separated Redux provider for each part of my application. in real world my application is to huge to use combine reducer and i don't want to merge my all Redux to 1 store so i create a store for each part. but i need another provider to make some state global and i call this provider as parent of my application. i can see redux data from my both provider in Redux extension. But i face with a problem that's i try use useSelector in my child component and i just can access to data of the child provider and i can't have access to my parent provider is there any solution for it or is this good way because i have hug application and hug state.

the parent provider

import { globalStore } from "@/store/globalStore";
import type { AppProps } from "next/app";
import { Provider } from "react-redux";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={globalStore}>
      <Component {...pageProps} />;
    </Provider>
  );
 }

 export default MyApp;

the child provider

import type { NextPage } from "next";
import { MainLayout } from "@/layouts/index";
import { Provider } from "react-redux";
import { homeStore } from "@/store/homeStore";
const Home: NextPage = () => {
  return (
    <>
      <Provider store={homeStore}>
        <MainLayout>
          <h1>test</h1>
        </MainLayout>
      </Provider>
    </>
  );
};

export default Home;

and the way i create store for each provider

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import { homeReducer } from "./reducer";
export const homeStore = createStore(
  homeReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

also i think i have problem with my dispatch action too if anyone can help with this too