1

I'm currently developing a micro-frontend application using React, webpack and module federation. It consists of one container app, and two "children" / remotes. The container app consist of an app bar, empty side drawer and main div, and the remotes it imports expose one independent React app for the actual page content, plus one single component which should render the navigation items for the side drawer, each: MFE design

The remote MFEs have their own Redux store each, which works fine for the page content part, as this includes an App.tsx with a Redux store provider. So far, also the navigation component worked fine, since all it did was push routes into the browser history.

Now I've run into a problem: the exposed navigation component of one remote also has to select data from it's Redux store and dispatch actions. This does not work so far, since it's a single exposed component, and when it's rendered in the container app, there is not Redux store provider for the childs Redux store. How could I solve this? I've read a few times that sharing redux state between micro frontends is a bad practice, so I was trying to avoid this so far. The data the navigation needs access to is basically just a boolean, which indicates that the application is in an elevated "service mode", making the remote MFE render a few more items (e.g. a "delete all" button which is usually hidden). So maybe this could also be shared through local storage or similar, what are some best practices here?

Here's my webpack config and some relevant code for better understanding:

// container app webpack config (development)
...
plugins: [
    new ModuleFederationPlugin({
      name: "container_app",
      remotes: {
        config_app: "config_app@http://localhost:3001/remoteEntry.js",
        commissioning_app: "commissioning_app@http://localhost:3002/remoteEntry.js",
      },
      shared: {
        ...
      },
    }),
  ],
...
// config_app webpack config (development)
...
 plugins: [
    new ModuleFederationPlugin({
      name: "config_app",
      filename: "remoteEntry.js",
      exposes: {
        "./ConfigApp": "./src/bootstrap",
        "./ConfigAppNavigation": "./src/components/UI/Misc/ConfigAppNavigation",
      },
      shared: {
        ...
      },
    }),
  ],

...
// MiniDrawer.tsx in container_app, which uses ConfigAppNavigation to render the navigation items 
// (depending on current route, otherwise navigation items are rendered from other MFE child)
...
const ConfigAppNavigation = lazy(() => import("config_app/ConfigAppNavigation"));
const MiniDrawer: React.FC = () => {
  ...
  <Switch>
    ...
    <Route path="/">
      <Suspense fallback={<span>loading ...</span>}>
        <ConfigAppNavigation onNavigate={onDrawerClose} />
      </Suspense>
    </Route>
  </Switch>
  ...
}
...

And as stated, before switching to an MFE design, the component which is now ConfigAppNavigation selected / changed the mentioned boolean value from config_app's Redux store, which now with this setup doesn't work.

0