CODEWITHSUNDEEP
reactjsreduxstate-managementmicro-frontend
Ahmed Khattab
Ahmed Khattab

Reputation: 3

How to manage state management across Micro front-end react apps?

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!

Upvotes: 0

Views: 2685

Answers (1)

timotgl
timotgl

Reputation: 2925

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..

Upvotes: 2

Related Questions