Global shared store

[simeon-raykov]

Hello,

My team is in the process of developing next.js micro front-end apps, transitioning from a large react SSR monolith. Our monolith uses redux rematch as our global state management and we are currently deciding on how to create the global store for our micro front-end apps. Currently, we plan to stick with rematch to ease the migration process. Our existing setup involves using the NX monorepo, with 2 applications: "demo remote" and "demo host." We are considering whether to have a single shell app or separate apps, and we believe that opting for separate apps would be a simpler approach. To achieve this, we propose passing the store as props using the following code:

const RemoteAppWrapper = ({
store }) => {
  return (
    <Provider store={store}>
      <RemoteApp />
    </Provider>
  )
; };
// and then in host app:
<RemoteApp store={store} />

We are interested in hearing people's opinions on this approach and would appreciate recommendations for the project structure.