can we have multiple stores in react redux

Question

I have requirement where i need to open a popup from main react application and this popup will have to have a seperate redux store from parent(its one more big application as good as parent application). Can we communicate between two?

Idea is to have this popup application as a node module and use in different pages as reusable component. So now i have coupe of questions

1. can we have 2 redux stores created and make them communicate each other
2. i saw something about maintaining sub apps, give here https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400 . Can we maintain communication between the main app and sub app stores?
3. How to maintain the router in a popup application, As the history back doesnt work in popup window. Any ideas here?

Would appreciate if you can share any live example.

Answer 1

The original Flux pattern describes having multiple “stores” in an app, each one holding a different area of domain data. This can introduce issues such as needing to have one store “waitFor” another store to update. This is not necessary in Redux because the separation between data domains is already achieved by splitting a single reducer into smaller reducers. Hope i could help read more in the link

Answer 2

Yes we can. Check this doc.

Wrap main component with Providers:

const ContextA = React.createContext();
const ContextB = React.createContext();

const storeA = createStore(reducerA);
const storeB = createStore(reducerB);

function App() {
  return (
    <Provider store={storeA} context={ContextA} />
      <Provider store={storeB} context={ContextB}>
        <RootModule />
      </Provider>
    </Provider>
  );
}

Example with connect:

connect(mapStateA, null, null, { context: ContextA })(MyComponentA)

// You may also pass the alternate context instance directly to the connected component instead
<ConnectedMyComponentA context={ContextA} />

// it is possible to chain connect()
// in this case MyComponent will receive merged props from both stores
compose(
  connect(mapStateA, null, null, { context: ContextA }),
  connect(mapStateB, null, null, { context: ContextB })
)(MyComponent);

Example with hooks:

// Create custom useSelector hook with context and use instead of importing from react-redux

export const useSelectorA = createSelectorHook(ContextA)
export const useSelectorB = createSelectorHook(ContextB)

...

function Component() {
  const aData = useSelectorA(aSelector)
  const bData = useSelectorB(bSelector)

  return ...
}

Also remember, there is no reason to create custom useStore and useDispatch at all, just import needed store directly, and you can also export its dispatch and later import directly.

But keep in mind that there are not much reasons to create multiple stores. Example - for performance optimization. Or as in your case - separation by application domain.