How to decide whats state i want from my 2 nested provider in react-redux

Question

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

Answer 1

In Redux, there are no concept of "parent" or "child" providers. Redux is made to have one store. Your "child provider" is just the new provider, overwriting the parent for all child components. You cannot just switch between them.

That said, there is a documented way of using 2 different contexts to use 2 stores, but generally this is not a recommended thing to do.