12

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 ?

N Sharma
  • 33,489
  • 95
  • 256
  • 444
  • Is there a specific reason that you use micro front-end architecture for this app? – kennysliding Jun 03 '21 at 08:16
  • You could have a composing store and actions and each subapp could have their own stores as well. – tarzen chugh Jun 07 '21 at 12:23
  • If your mfe's are interacting too much with each other, you probably shouldn't keep them isolated. General opinion is to avoid redux i.e communication between mfe's. The main aim should be to keep interactions between mfe's at an absolute minimum. But, if you rally need to - you can create a store/state-mgmt as another mfe and subscribe to the service https://youtube.com/watch?v=tFDvEITdJZ8 – Vivek Chandra Jun 08 '21 at 07:44
  • 1
    Also, the concept of redux is "single source of truth". By creating 4 sources of truth, you are not using redux in it's intended way and will inadvertently introduce unwanted complexity as the project grows with each mfe changing another mfe's state (if designed in this fasion). You can think of each as an isolated project and handle communication via `customEvent` or a lean `pub-sub` module (may be `rxjs` if you need something more robust) - good read on various approaches [here](https://dev.to/luistak/cross-micro-frontends-communication-30m3) – Vivek Chandra Jun 08 '21 at 07:52
  • If you have 4 distinct applications, you should have 4 distinct redux store; making a single source of truth for a group of applications couples them together under a common state, when microfrontends are expected to be completely separate from one another. If you need to sync stores, just send messages via CustomEvents and eventListeners. – lux Jun 10 '21 at 14:31

6 Answers6

2

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
TusharK
  • 61
  • 4
  • Do you have some sample code for sharing data between these apps using redux ? – N Sharma Jun 29 '21 at 12:14
  • Its a customized solution for my client. But you will get many reference when you search for SingleSpa + React + Redux. [Example link 1](https://medium.com/canopy-tax/a-step-by-step-guide-to-single-spa-abbbcb1bedc6) [Discussion link](https://github.com/single-spa/single-spa/issues/107) – TusharK Jul 05 '21 at 10:47
1

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

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
  • I don’t get why both answers have been voted down here, I’ve worked on project that have done multiple redux stores and they ended up migrating to a single name spaced stores, as sharing data between store becomes painful. – David Bradshaw Jun 13 '21 at 16:36
1

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

Sultan
  • 72
  • 8
-1

If some of your redux stores needed to be shared across your application, then just create a seperate package out of that redux store using monorepo with yarn workspaces.

You can install that store as a seperate package and just use it by defined package name.

For more on this topic, please have a look at this Yarn Workspaces website. https://classic.yarnpkg.com/en/docs/workspaces/

Also, using 4 redux store is not that bad as long as your micro frontend is supposed to be a self contained application in itself. But if the data is being used across all of your micro frontends then create a single store for single source of truth.

Gaurav Sharma
  • 107
  • 1
  • 7
-1
//add the code in componentdidmount where you want to receive the data
window.addEventListener("event-name", (datarecieved)=> {
    console.log(datarecieved.detail);
}, false);

//Create an event to pass data
let send-data = new CustomEvent("event-name", {detail: "Hi Suraj here"});
window.dispatchEvent(send-data);

Pass data all across your mfes as when required in Home, Account, PLP&PDP and Cart&Checkout.

Suraj Mohata
  • 106
  • 1
  • 5
-2

Up to my knowledge, Micro front end Architecture (MFeA) should not have any dependencies with other part of the page, it has to work independently.

Basing on that, backend service has to send the necessary information to the UI.

For user Information you can use Session and get the corresponding information from that.

For managing the User profile, it can be another MFeA module.

kkchaitu
  • 631
  • 2
  • 5
  • 24