2

Hello guys,

I'm wondering what is your favourite approach for handling state management across micro front-end apps?

For example:

I've many run time apps as isolated standalone applications, each one represents a flow of two or three pages, then we've to wire them all by one container/host app.

Each flow/ micro app might have their own state management, however, we might need to know about another micro application state!

I've found approach that implementing a shared app as a global state and it has to be wired up with the nested sub apps.

Moreover, I've found a npm package that is responsible for handling global redux store across multiple micro apps.

Finally, I need to make sure what is your recommendation for implementing global states in micro frontend react apps?

Thanks in advance!

Ahmed Khattab
  • 23
  • 4
  • I think If your project is not too big then you can use Context for that you shouldn't Install any other Package it Comes with React. – Jagroop Oct 15 '22 at 10:45
  • 1
    @Jagroop See most upvoted answer to https://stackoverflow.com/questions/71532470/react-context-between-microfrontends on why this is a bad idea. – timotgl Oct 15 '22 at 13:37

1 Answers1

1

I'd use https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent as also suggested by https://micro-frontends.org/ - I don't think it helps to introduce another micro frontend into the mix just to handle state - it just adds more complexity. In the spirit of "The DOM is the API" (quoted verbatim from https://micro-frontends.org/ ), native Events and CustomEvent should to the trick. The micro frontend that needs to communicate to the other ones emits an event, and the other frontends listen to it. You can come up with your own naming scheme etc..

timotgl
  • 2,865
  • 1
  • 9
  • 19