Shared State & Routing Between MFEs
Share a global event bus or context across micro-frontends and coordinate client-side routing.
The State Sharing Challenge
Micro-frontends in different bundles cannot directly share React state or context. They need alternative strategies: custom events, shared stores, URL, or a pub/sub event bus.
Browser Custom Events
Use the browser's CustomEvent API as a simple event bus between micro-frontends without coupling them together.
// Remote emits:
window.dispatchEvent(new CustomEvent('cart:add', { detail: { productId: '123' } }));
// Host listens:
useEffect(() => {
const handler = (e: CustomEvent) => addToCart(e.detail.productId);
window.addEventListener('cart:add', handler);
return () => window.removeEventListener('cart:add', handler);
}, []);All lessons in this course
- Micro-Frontend Concepts & Trade-offs
- Module Federation with Webpack 5
- Shared State & Routing Between MFEs
- Independent Deployment & CI Pipelines for MFEs