Dele tilstand og ruting mellom remoter

Hver Module Federation-remote er en selvstendig bygget og distribuert applikasjon. Tilstanden (React useState, Context, Zustand-lagre) ligger i sitt eget JavaScript-modulomfang. Hosten og remotes deler ikke automatisk tilstand – delingen må arkitekteres eksplisitt.

Den enkleste mekanismen for deling av tilstand er URL-en: alle remotes kan lese URL-parametere, query strings og hash-verdier uten kommunikasjon på tvers av remotes. Dette fungerer godt for primær navigasjonstilstand, filterverdier og all annen tilstand som bør kunne bokmerkes og deles via en lenke.

CustomEvents via nettleserens EventTarget gjør det mulig for remotes å kommunisere uten direkte importer. Et remote sender window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart })), og enhver annen modul (host eller andre remotes) lytter med window.addEventListener('cart:updated', handler). Ingen delt modul er nødvendig.

Opprett en dedikert «state remote» som eksponerer en Zustand- eller Jotai-store. Både hosten og andre remotes importerer fra denne state remoten og får den samme store-instansen – fordi den er en delt singleton. Dette er effektivt for kompleks, delt tilstand (autentisering, handlekurv og brukerinnstillinger), men tilfører en distribusjonsavhengighet.

Skallet (hosten) eier all delt tilstand og sender den videre til remotes som props eller via Context. Remotes mottar callbacks som onCartUpdate og navigate som props. Dette holder tilstanden sentralisert i hosten, men krever at hosten kjenner API-ene til remotes – noe som skaper tett kobling.

React Routers history- og location-tilstand leveres av en Router-komponent (BrowserRouter eller createBrowserRouter). Det må finnes nøyaktig én Router i et Module Federation-oppsett – hvis du plasserer én i hvert remote, oppstår flere konkurrerende rutingskontekster, noe som fører til navigasjonskonflikter.

Den arkitektoniske regelen er at hosten (skallet) leverer Router-en. Remotes mottar rutingprops fra hosten (eller leser URL-en direkte). Et remote skal aldri opprette sin egen BrowserRouter – det vil komme i konflikt med hostens Router og ødelegge navigasjonen for hele applikasjonen.

React Context-verdier er knyttet til en bestemt React-instans og et bestemt Context-objekt. For at en Context skal fungere på tvers av host og remote, må begge importere det samme Context-objektet fra samme kilde – vanligvis state remoten eller en delt verktøypakke. React-singletonen sikrer at den samme Context fungerer på tvers av alle remotes.

I en ryddig Module Federation-arkitektur eier skallet (hosten) HTML-skallet, Router-leverandøren, Auth-konteksten, leverandøren av tema og design tokens samt global navigasjon. Remotes eier innholdet i sitt funksjonsdomene. Skallet setter sammen remotes i layouten uten å kjenne implementasjonsdetaljene deres.

Det største antipatternet i Module Federation er tett kobling mellom host og remote: hosten importerer typer fra remote, remote importerer komponenter fra hosten, eller de deler en felles npm-pakke som begge må oppdatere samtidig. Slike koblinger motvirker formålet med uavhengig distribusjon.

Definer eksplisitte kontrakter mellom host og remotes: hvilke props en remote-komponent tar imot, hvilke CustomEvents den sender ut, og hvilke URL-parametere den leser. Dokumenter disse kontraktene som TypeScript-grensesnitt i en delt types-pakke. Da kan teamene utvikle seg uavhengig innenfor den avtalte kontrakten.

Deling av tilstand på tvers av Module Federation-remotes kan bruke URL-tilstand (enklest), CustomEvents (løst koblet), en delt state remote (sentralisert store) eller tilstand som eies av hosten og sendes som props. Hosten må eie den eneste Router-leverandøren – remotes skal aldri opprette sin egen. Tydelige kommunikasjonskontrakter via TypeScript-grensesnitt holder teamene løst koblet og muliggjør reell uavhengig distribusjon.