Hackforge Academy

Explanation

Each Micro Frontend should ideally manage its own local state. For example, the Product Micro Frontend can manage product filters while the Cart Micro Frontend manages cart items.

Code:

Product App
└── Product Filters State

Cart App
└── Cart Items State

Payment App
└── Payment State

Explanation

Some data needs to be shared across Micro Frontends, such as the logged-in user, shopping cart count, or selected language. Shared state should be kept as small and simple as possible.

Code:

Shared State
├── User
├── Cart Count
└── Language

Product App ──┐
Cart App ─────┼──→ Shared State
Payment App ──┘

Explanation

Browser CustomEvent can allow Micro Frontends to communicate without directly depending on each other's internal state management.

Code:

window.dispatchEvent(
  new CustomEvent('cartUpdated', {
    detail: { count: 3 }
  })
);

Explanation

A shared state solution can expose common application data through a shared React context, state library, or dedicated state service when multiple Micro Frontends need the same information.

Code:

const AppContext = createContext();

<AppContext.Provider value={user}>
  <ProductApp />
  <CartApp />
</AppContext.Provider>

Explanation

A good Micro Frontend architecture keeps domain-specific state inside each Remote and shares only necessary global state. This reduces coupling and makes individual applications easier to develop and deploy.

Code:

                Global State
               /      |      \
              ↓       ↓       ↓
           User    Cart Count  Theme
              \
               ↓
      ┌─────────┼─────────┐
      ↓         ↓         ↓
   Product     Cart    Payment
   Local       Local     Local
   State       State     State