How to share data between more than two React applications?

Question

I`m need to share some data for more than one application, some part of data are secure some not. It needs for avoid multiple identical requests from applications. I considered IndexedDb, localStorage, but in some browsers in incognito mode its not working. Maybe the last way its create parent app, who will be give api interface, do the same request and provide state to child components through global object, and child components can call request if its need through global api, but its very strange and anybody can change its object. Does anybody know how to solve this problem? Any idea will be good for me! Thanks for advice!

Answer 1

Perhaps you can investigate Micro Frontends infrastructure. The term "Micro Frontends" first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world.

Basically, you can start from a "shell" app which holds the global state or data such as routing, sessions, auth tokens etc.

Below this layer, you can choose any frontend framework you would like to use to build independent SPAs and they can share the global data easily via an event bus which is made of custom javascript events.

For example, you can create an event "print_report" in the shell:

window.dispatchEvent(new Event("print_report") );

And execute it in the sub-level apps:

window.addEventListener("print_report", () => { call_back(data); });

At the end, each of the frontend module:

• is self-contained
• can be developed independently
• can be tested independently
• can be deployed independently
• is technology / framework agnostic
• can communicate with each other via a global event bus.

For more information about the above, please read:

• https://www.thoughtworks.com/radar/techniques/micro-frontends
• https://blog.pragmatists.com/independent-micro-frontends-with-single-spa-library-a829012dc5be
• https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16