React - Wrapping all components in redux provider with store injection, Multi page app

Question

I have created an hoc which looks like

const withStore = Component => {
  const storeWrapper = props => (
    <ReduxProvider store={store}>
      <Component {...props } />
    </ReduxProvider>
  );

  return storeWrapper; 
};

Now all my separate components are wrapped by this(its multi page application) so that they can connect to same store, but that's not the case, one component is getting connected, changing with the incoming changes in props. But other components are totally disconnected not showing any change with data being changed in store.

Has anyone tried this approach earlier?

An example - if I have componentA and componentB, wrapped with this hoc. Any store change from dispatch from componentA is getting reflected by componentA. Same for componentB. Main problem is when dispatch is from componentA and it is not getting read of componentB. vice-versa

Answer 1

As mentioned in @orel's comment, I resolved it by storing store in global variable.

In store.js file, to keep single instance everywhere, I added a condition

if (!window.store) {
  window.store = store;
}

It works like charm now!!