Using redux-micro-frontend for shared history

[peterkmurphy]

At the moment, my organisation is looking into the whole instance of microfrontends.

We have several applications (React + Redux + React Router) that we have developed - and are developing - separately. However, we are interested in having them integrated as microfrontends in another application (the 'container'), which would contain common functionality like the navigation bars. Otherwise, the microfrontends would generally do their own thing. Users can navigate to Microfrontend App 1 at address /mfeapp1, Microfrontend App 2 at address /mfeapp2, and so on. (If the applications are running as microfrontends, we can engineer it so that the different apps are running on different paths.)

Each app has Redux, but there is no shared state between the apps... with one exception: router history. And this is one area where it would be a good idea to have shared state, so that both the container and the microfrontends know what URL the user has navigated to.

What I am looking for is some guidance on whether redux-micro-frontend is suitable for this situation. In the container app, we have:

const reducers = (history: History<unknown>) => combineReducers({
  router: connectRouter(history), // From connected-react-router
});

And the container store is:

  store = createReduxStore(reducers(history), compose(
    applyMiddleware(
      thunk,
      routerMiddleware(history),
    ),
    /* eslint-disable-next-line no-underscore-dangle */
    process.env.NODE_ENV === 'development' && window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f: unknown) => f,
  ));

Microfrontends may be interacting with the history

import { push } from 'connected-react-router';
/* ... */
dispatch(push(path)); // The user has pressed a button.

I looked at your sample app, but I noticed that both the microfrontends are running on the same page. This seems a different situation from where my organisations finds itself.

[patrickCode]

From the description of your application, redux-micro-frontend can be used for maintaining the route history. In fact, in our organization we are using this library for maintaining the route history. Similar to the architecture that you have mentioned here, we have multiple apps (in different pages and location), and the global routing history is maintained by this lib.

Let me know if you would wan't to know more about how we maintain the state history.

[peterkmurphy]

@patrickCode That would be very much appreciated. Thank you/