Dela tillstånd och verktyg mellan remotes
Lär Er avancerade mönster för att säkert dela inte bara bibliotek utan även stateful stores, design tokens och verktygsmoduler mellan federerade remotes.
Dela tillstånd och verktyg mellan remotes är en gratis lektion i Mikrofrontendarkitektur med Module Federation på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Mikrofrontendarkitektur med Module Federation, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.
Bortom bibliotek
Module Federation kan dela mer än tredjepartsbibliotek. Ni kan exponera era egna tillståndshanterare, verktyg och designtokens så att alla remotes använder en gemensam och konsekvent källa.
Dela en verktygsmodul
Exponera ett delat verktygspaket från en app och använd det överallt, så att ni slipper kopierad hjälpkod.
exposes: { "./format": "./src/utils/format" }
// elsewhere
import { formatPrice } from "shared/format";Dela designtokens
Exponera färger, avstånd och typografi som en delad modul så att varje micro frontend förblir visuellt konsekvent utan att paketera sin egen kopia av temat.
exposes: { "./tokens": "./src/theme/tokens" }Dela en tillståndsbutik
En delad store (till exempel en Redux- eller Zustand-instans) gör att remotes kan läsa och uppdatera gemensamma data. Det viktiga är att dela en enda instans, inte separata kopior.
Varför singleton är viktigt för tillstånd
Om två remotes laddar varsin store kommer deras tillstånd att skilja sig åt. Genom att markera store-paketet med singleton: true säkerställer ni att de delar samma aktiva instans.
shared: {
"@app/store": { singleton: true }
}Exponera store-instansen
Exponera det redan skapade lagret, inte en fabrik, så att konsumenterna ansluter till samma objekt.
import { createStore } from "./store";
export const store = createStore();
// exposes: { "./store": "./src/store-instance" }Använda delat tillstånd
Remotes importerar det delade lagret och prenumererar på det precis som på ett lokalt lager, men uppdateringar från alla remotes blir synliga för alla.
import { store } from "shell/store";
store.subscribe(() => render(store.getState()));Avvägningen med koppling
Delat förändringsbart tillstånd ökar kopplingen. Överanvändning återskapar de täta beroenden som micro frontends försöker undvika. Dela endast tillstånd för sådant som verkligen berör flera delar, till exempel autentisering eller varukorg.
Föredra händelser för lös koppling
Föredra om möjligt en delad händelsekanal framför ett delat förändringsbart lager. Händelser håller remotes löst kopplade och låter dem ändå reagera på varandra.
Versionshantera kontrakt för delat tillstånd
Behandla strukturen för delat tillstånd och delade verktyg som ett offentligt kontrakt. Att ändra det är en inkompatibel ändring, så versionshantera det och informera de team som använder det om uppdateringar.
En skiktad strategi för delning
En sund strategi delar upp delningen i skikt:
- Bibliotek: dela fritt (React med flera)
- Verktyg och tokens: dela för konsekvens
- Föränderligt tillstånd: dela sparsamt och medvetet
Snabbtest
Testa dina kunskaper om avancerad delning.
Sammanfattning
Du har lärt dig avancerad delning:
- Dela verktyg och designtokens för konsekvens
- Dela ett singleton-lager för tillstånd som berör flera delar
- Exponera instansen, inte en fabrik
- Föredra händelser för att begränsa kopplingen
- Versionshantera delade kontrakt med omsorg
Genomtänkt delning balanserar konsekvens och självständighet.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Dela tillstånd och verktyg mellan remotes” gratis?
Ja – hela texten till ”Dela tillstånd och verktyg mellan remotes” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Mikrofrontendarkitektur med Module Federation, kan Ni uppgradera till CoddyKit PRO. Kursen i Mikrofrontendarkitektur med Module Federation innehåller totalt 4 lektioner.
Vad lär jag mig i ”Dela tillstånd och verktyg mellan remotes”?
Lär Er avancerade mönster för att säkert dela inte bara bibliotek utan även stateful stores, design tokens och verktygsmoduler mellan federerade remotes. Ni övar på Mikrofrontendarkitektur med Module Federation med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Mikrofrontendarkitektur med Module Federation?
Du behöver inga förkunskaper. Utbildningen i Mikrofrontendarkitektur med Module Federation på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Dela tillstånd och verktyg mellan remotes”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Mikrofrontendarkitektur med Module Federation-lektionen?
Ja. Varje Mikrofrontendarkitektur med Module Federation-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konsumera delade beroenden
- Singleton-moduler och versionshantering
- Dynamisk modulinkoppning
- Dela tillstånd och verktyg mellan remotes