How to change the global redux store depending on the React App route?

Question

React

Good afternoon. There is a large application consisting of two independent parts. One is loaded by default, the second is loaded when the "/bla-bla" route is appended. How can you make it so that when you go through this route, your redux store is loaded, which does not know anything about the existence of the default one?
Thank you.

Answer 1

In a good way, divide the application into two parts and define your own store in each.
But nothing prevents you from using an unlimited number of stores in one application:
Example 1:

const store1 = configureStore1();
const store2 = configureStore2();

const App = () => (
  <>
    <Provider store={store1}>
      <MainProject />
    </Provider>
    <Provider store={store2}>
      <SubProject />
    </Provider>
  </>
);

Example 2:

const store1 = configureStore1();
const store2 = configureStore2();

const App = () => (
  <Provider store={store1}>
    <>
      <MainProject />
      <Provider store={store2}>
        <SubProject />
      </Provider>
    </>
  </Provider>
);

With routing, the example will be a little more complicated, but the essence of this will not change.