Micro front end in react [closed]

Question

Hello I am learning micro front end architecture. Consider I am working on e-commerce application where I have four verticals - Home, Account, PLP&PDP and Cart&Checkout.

My understanding is that each verticals will have their views, actions, reducers, sagas, store. Here we will have 4 redux store.

My question is there are couple of things like user profile reducer which might be useful to shared across all these micro front end apps. Here using 4 redux store is good idea ?

What is the correct way to handle this in react web app ?

Answer 1

There is no standard template solution for your question, its all need based. I am sharing how I worked on similar project structure and converted large monolith to Front & Back end micro services. FE is developed using different technology mix of Angular, React and Vue. We are using https://single-spa.js.org/ for management of different modules and created a parent app(container) in React and child frames as separate app using Angular and Vue. Data sharing management is done using mix of cookies/local storage and redux. Sharing of data between child and parent app is using Post Robot https://github.com/krakenjs/post-robot. We are running this structure in production from last 1.5 years and it is scalable solution.

Answer 2

You have rightly divided the micro-frontends into Home, Account, PLP&PDP and Cart&Checkout and these will have their own store which will allow you to maintain them separately.

However, the catch is that they should be making service calls separately and maintain their store for that.

Now this way, the userProfile will be irrelevant to the Product Listing Page and Product Details Page. Same case with the Cart and Checkout Components. They might require a token to make some API calls, but that value can be fetched from the localStorage.

The other alternative would be to have a single Store and pass in functions to the respective micro-frontends for the actions. However, that complicates your application and moves towards a monolithic approach , defeating the purpose of a MFE architecture.

Refer to this link to checkout the basics https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication

As a side-note, using Custom Events is also effective when it comes to communication between MFEs but that is preferable in cases where there is a large set of interactions required between projects. Refer: https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

Answer 3

In my experience your better off having one redux store that it managed at the framework level of your micro frontend that is namespaces for each of your micro applications. As each app is loaded in it can dynamically load in reducers, middleware and data.

The reason for taking this approach is that you will inevitably end up with some data that needs to be shared between different micro applications and this is much easier when you have a single store.

Check out this project from Microsoft that makes this a pretty simple thing to do now.

https://github.com/Microsoft/redux-dynamic-modules

Their are a number of other solutions to load different things into your store dynamically

https://github.com/markerikson/redux-ecosystem-links/blob/master/reducers.md#dynamic-reducer-injection