Micro Frontends - Sharing State between applications

[@g-ytub]

This is an excellent tutorial on sharing state between MFEs. My lots of gratitude to you.

[@russellcanfield]

Glad you found it helpful!

[@maxtsh]

This is super valuable content man, thanks for sharing your experience.

[@russellcanfield]

Thank you! Hard to make a one size fits all approach but everything follows some sort of pattern and hopefully it helps no matter what frameworks you use

[@calvinnguyen1451]

Great introduction of an important topic!

[@Dadaadad268]

Hi Russel, can you use a Redux context provider on the window object in the same way as the Create context version? Or is this not a good idea?

[@russellcanfield]

You can share context, now the problem with sharing a global reference is that react won't re-render I believe because you aren't going through their API. There are a few approaches, you can useSynxExternalStore and sync the contexts - which will re-render as you expect, this can be done with a simple "event bus" approach as well to decouple things.
You could also use an external package and share it as a singleton, the host can mount it in the DOM and you can use hooks to interface with the context as if the remote modules have it mounted - except you would not mount it in the remote modules.

[@Dadaadad268]

Also is there a github link for the Jotai example?

[@russellcanfield]

@@Dadaadad268 I apparently do not :( you can use a similar approach with Jotai, share some store atoms globally by reference (singleton module), useSyncExternal store, or use Jotai's subscription feature

[@Dadaadad268]

@@russellcanfield Thanks Russell. I'm trying the Jotai approach putting the reference on the window object. The imported module isn't updating the state though. I'm building the imported module first and running it in vite preview, the core app that imports it is running in dev mode. Should this still work?

[@Dadaadad268]

Updating the window object doesn't re-render the component, so this would be the issue...

[@july_wayne]

nice
keep it up bro :D

[@russellcanfield]

Thank you! Let me know if you have anything you’d like to see covered

[@tranvansi6302]

I am not using nx mono repo I am having problem with react query (tanstack v5) when I wrap QueryProvider in host and MFE the problem I am having is when I add a product I use queryClient.invalidateQueries to reload data in MFE but when I go to host I have to F5 again. So is there any way to sync data immediately without F5 in host? Thank you

[@russellcanfield]

It should be sharing react-query as a singleton but the double QueryProviders may be to blame. By default react-query creates a react context, so if you create 2 query providers it might be creating two context providers

[@tranvansi6302]

@@russellcanfield thank bro ❤❤. I have solved it now but there is a big problem that I have tried to search but still have not found a solution. If on the dev environment everything is fine but when I build to the production environment, there is a situation when I directly enter the url of a router with a remote to an MFE, the error is 404 The requested path could not be found, but if I click on the Link with the same path, the MFE can be loaded but reloading the page gives an error 404 The requested path could not be found, when I reload, in the Sources section of the dev tool there is no remote loaded. Can you give me some advice? Thank you

[@russellcanfield]

@@tranvansi6302 in dev you are probably hitting a URL fallback in webpack dev server, forget the setting name. But in production you may need a redirect back to your index.html so that react router can intercept and apply the routing rules.
There are a few articles online with like nginx to setup for a SPA

[@tranvansi6302]

@@russellcanfield Can you give me some resources or keywords to solve this problem. Thank you.

[@russellcanfield]

@@tranvansi6302 Sure, try this if you are using nginx
dev.to/paulmojicatech/nginx-and-angular-spa-redirect-11ji

[@GuilhermeHenrique-fp1wo]

Do you have a with Rtk Query?

[@russellcanfield]

I don’t, I can try to take a look at it. I think you could share a store reference and maybe get away with it. But there may be a better pattern

[@sadigzade.hi10]

lll