Stato condiviso e routing tra MFE
Condivida un event bus globale o un context tra micro-frontend e coordini il routing lato client.
Stato condiviso e routing tra MFE è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
La sfida della condivisione dello stato
I microfrontend presenti in bundle diversi non possono condividere direttamente lo stato o il contesto React. Sono necessarie strategie alternative: eventi personalizzati, store condivisi, URL o un event bus pub/sub.
Eventi personalizzati del browser
Utilizzate l'API CustomEvent del browser come semplice event bus tra microfrontend, senza creare accoppiamenti tra loro.
// 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);
}, []);Libreria event bus condivisa
Una piccola libreria pub/sub condivisa (tramite Module Federation o un singleton caricato da un URL) fornisce un event bus tipizzato accessibile a tutti gli MFE.
// Singleton event bus
const bus = {
listeners: new Map<string, Function[]>(),
emit(event: string, data: unknown) {
this.listeners.get(event)?.forEach(fn => fn(data));
},
on(event: string, fn: Function) {
if (!this.listeners.has(event)) this.listeners.set(event, []);
this.listeners.get(event)!.push(fn);
return () => this.off(event, fn);
},
off(event: string, fn: Function) {
const list = this.listeners.get(event) || [];
this.listeners.set(event, list.filter(f => f !== fn));
},
};
export default bus;L'URL come stato condiviso
L'URL (percorso e parametri di query) è condiviso naturalmente tra tutti gli MFE. Utilizzatelo per lo stato di navigazione, ad esempio l'elemento selezionato, la scheda attiva o i valori dei filtri.
// Remote reads from URL:
const params = new URLSearchParams(window.location.search);
const productId = params.get('product');
// Remote navigates via history API (or exposes a navigate callback from host):
window.history.pushState({}, '', '/products?product=456');Architettura del routing
In genere, l'app shell/host gestisce il router di primo livello. I microfrontend remote ricevono il percorso corrente e una callback navigate come props.
// Host passes routing control to remote:
<RemoteProductsApp
basepath="/products"
navigate={(path) => router.push(path)}
/>
// Remote uses basepath for its internal router:
<BrowserRouter basename={basepath}>
<Routes>...</Routes>
</BrowserRouter>React Router con Module Federation
Ogni MFE può eseguire il proprio React Router, limitato al relativo basepath. Il router host gestisce la navigazione di primo livello; ogni remote gestisce in modo indipendente la propria sotto-navigazione.
// Remote App component:
export function ProductsApp({ basepath = '/products' }) {
return (
<BrowserRouter basename={basepath}>
<Routes>
<Route path="/" element={<ProductList />} />
<Route path="/:id" element={<ProductDetail />} />
</Routes>
</BrowserRouter>
);
}Stato di autenticazione condiviso
Lo stato di autenticazione (utente, token) è generalmente gestito dalla shell e passato ai remote come props oppure esposto tramite uno store singleton condiviso.
// Host provides auth via props:
<RemoteCheckout
userId={currentUser.id}
token={accessToken}
onLogout={handleLogout}
/>Zustand come store condiviso
Quando condividete uno store Zustand tramite Module Federation (come singleton), tutti gli MFE leggono dalla stessa istanza dello store in memoria.
// shared/store.ts (exposed as singleton)
import { create } from 'zustand';
export const useCartStore = create(set => ({
items: [],
addItem: (item) => set(state => ({ items: [...state.items, item] })),
}));
// Configured as singleton in MF shared configAnti-pattern nella comunicazione tra MFE
Evitate catene di callback profondamente annidate, la condivisione dello stato interno dei componenti o l'accoppiamento stretto alle API interne di un altro MFE. Limitate la comunicazione a eventi di alto livello e contratti pubblici.
Test delle interazioni tra MFE
Testate i contratti degli eventi (nomi degli eventi e forme dei dati) separatamente dall'interfaccia utente. Utilizzate il contract testing per verificare che produttore e consumer concordino sullo schema dell'evento.
Controllo rapido
Qual è il modo più semplice per condividere lo stato di navigazione o dei filtri tra più microfrontend senza creare accoppiamenti?
Riepilogo
Condividete lo stato tra gli MFE tramite eventi personalizzati, un event bus singleton, l'URL o store condivisi (Zustand/singleton). La shell gestisce il router di primo livello e passa basepath e navigate ai remote. Mantenete i contratti tra MFE di alto livello e ben tipizzati.
Domande Frequenti
La lezione «Stato condiviso e routing tra MFE» è gratuita?
Sì — il testo completo di «Stato condiviso e routing tra MFE» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Stato condiviso e routing tra MFE»?
Condivida un event bus globale o un context tra micro-frontend e coordini il routing lato client. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Stato condiviso e routing tra MFE»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Concetti e compromessi dei micro-frontend
- Module Federation con Webpack 5
- Stato condiviso e routing tra MFE
- Deployment indipendente e pipeline CI per MFE