Jaettu tila ja reititys MFE:iden välillä
Jakakaa globaali event bus tai context micro-frontendien välillä ja koordinoikaa client-puolen reititys.
Jaettu tila ja reititys MFE:iden välillä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.
Tilan jakamisen haaste
Eri bundleissa olevat mikrofrontendit eivät voi jakaa React-tilaa tai kontekstia suoraan. Ne tarvitsevat vaihtoehtoisia strategioita: mukautettuja tapahtumia, jaettuja storeja, URL-osoitetta tai pub/sub-tapahtumaväylää.
Selaimen mukautetut tapahtumat
Käyttäkää selaimen CustomEvent-rajapintaa yksinkertaisena tapahtumaväylänä mikrofrontendien välillä ilman tiukkaa kytkentää niiden välille.
// 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);
}, []);Jaettu tapahtumaväyläkirjasto
Pieni pub/sub-kirjasto, joka jaetaan (Module Federationin kautta tai URL-osoitteesta ladattavana singletonina), tarjoaa kaikille MFE:ille käytettävän tyypitetyn tapahtumaväylän.
// 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;URL jaettuna tilana
URL-osoite (polku ja kyselyparametrit) jaetaan luonnostaan kaikkien MFE:iden kesken. Käyttäkää sitä navigointitilaan, kuten valittuun kohteeseen, aktiiviseen välilehteen tai suodatinarvoihin.
// 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');Reititysarkkitehtuuri
Yleensä shell- eli host-sovellus omistaa päätason reitittimen. Remote-mikrofrontendit saavat nykyisen polun ja navigate-takaisinkutsun propseina.
// 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 Module Federationin kanssa
Kukin MFE voi käyttää omaa React Routeriaan, joka on rajattu sen basepath-polkuun. Hostin reititin käsittelee päätason navigoinnin, ja kukin remote hoitaa alitason navigoinnin itsenäisesti.
// Remote App component:
export function ProductsApp({ basepath = '/products' }) {
return (
<BrowserRouter basename={basepath}>
<Routes>
<Route path="/" element={<ProductList />} />
<Route path="/:id" element={<ProductDetail />} />
</Routes>
</BrowserRouter>
);
}Jaettu autentikointitila
Autentikointitila (user, token) kuuluu yleensä shell-sovellukselle, joka välittää sen remoteille propseina tai tarjoaa sen jaetun singleton-storen kautta.
// Host provides auth via props:
<RemoteCheckout
userId={currentUser.id}
token={accessToken}
onLogout={handleLogout}
/>Zustand jaettuna storena
Kun Zustand-store jaetaan Module Federationin kautta singletonina, kaikki MFE:t lukevat samaa muistissa olevaa store-instanssia.
// 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 configMFE:iden välisen viestinnän huonot käytännöt
Välttäkää syvälle upotettuja takaisinkutsuketjuja, sisäisen komponenttitilan jakamista ja tiukkaa kytkeytymistä toisen MFE:n sisäisiin rajapintoihin. Rajoittakaa viestintä karkeatasoisiin tapahtumiin ja julkisiin sopimuksiin.
MFE:iden välisten vuorovaikutusten testaaminen
Testatkaa tapahtumasopimukset (tapahtumien nimet ja tietorakenteet) erillään käyttöliittymästä. Varmistakaa sopimustestauksella, että tuottaja ja kuluttaja käyttävät samaa tapahtumakaaviota.
Pikatarkistus
Mikä on yksinkertaisin tapa jakaa navigointi- tai suodatintila useiden mikrofrontendien kesken ilman niiden kytkemistä toisiinsa?
Kertaus
Jakakaa tila MFE:iden kesken mukautetuilla tapahtumilla, singleton-tapahtumaväylällä, URL-osoitteella tai jaetuilla storeilla (Zustand/singleton). Shell omistaa päätason reitittimen ja välittää remotesovelluksille basepath-arvon sekä navigate-funktion. Pitäkää MFE:iden väliset sopimukset karkeatasoisina ja hyvin tyypitettyinä.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Jaettu tila ja reititys MFE:iden välillä” ilmainen?
Kyllä – oppitunnin ”Jaettu tila ja reititys MFE:iden välillä” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Jaettu tila ja reititys MFE:iden välillä”?
Jakakaa globaali event bus tai context micro-frontendien välillä ja koordinoikaa client-puolen reititys. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Jaettu tila ja reititys MFE:iden välillä”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Micro-frontendien käsitteet ja kompromissit
- Module Federation Webpack 5:llä
- Jaettu tila ja reititys MFE:iden välillä
- MFE:iden itsenäinen julkaisu ja CI-putket