Mikrofrontendarkitektur med Module Federation · Lektion

Håndtering af delt tilstand

Udforsk strategier til håndtering af delt tilstand på tværs af federerede applikationer, eksempelvis Redux eller Context API.

Lektion 2 af 411 trin

Håndtering af delt tilstand er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Hvad er delt tilstand?

I mikrofrontends henviser delt tilstand til data, der skal være tilgængelige og ensartede på tværs af forskellige, uafhængigt udviklede og udrullede applikationer.

Tænk på brugerens godkendelsesstatus, globale temaindstillinger eller indholdet af en indkøbskurv.
Denne tilstand ejes ikke af én enkelt mikrofrontend, men er afgørende for en sammenhængende brugeroplevelse.

Effektiv håndtering af denne tilstand er afgørende for at bygge komplekse fødererede applikationer.

Hvorfor delt tilstand i MFE'er?

Når flere mikrofrontends tilsammen udgør én brugergrænseflade, har de ofte brug for at reagere på de samme globale oplysninger.

Brugeroplevelse: En bruger logger ind i én MFE, og de andre skal vide, at brugeren er godkendt.
Konsistens: Anvendelse af en global temapræference på tværs af alle dele af applikationen.
Dataflow: Overførsel af data fra én MFE (f.eks. et produktvalg) til en anden (f.eks. betaling).

Uden delt tilstand ville hver MFE administrere sine egne isolerede data, hvilket ville føre til uoverensstemmelser og en usammenhængende brugerrejse.

Udfordringer ved delt tilstand

Selvom det er nødvendigt, medfører deling af tilstand i en mikrofrontend-arkitektur nogle særlige udfordringer:

Isolation: MFE'er er designet til at være uafhængige. Hvis denne isolation brydes, kræver det omhyggelig planlægning.
Uafhængighed af framework: Forskellige MFE'er kan bruge forskellige JavaScript-frameworks (React, Angular, Vue).
Ydeevne: Ineffektiv deling kan føre til overflødig datahentning eller langsomme opdateringer.
Kompleksitet: Det kan være komplekst at afgøre ejerskab, mekanismer til opdatering og hvordan konflikter undgås.

Vi har brug for strategier, der skaber balance mellem uafhængighed og nødvendigheden af delte oplysninger.

Enkel delt tilstand: Local Storage

Til meget enkel, ikke-følsom og persistent tilstand kan browserens Local Storage være en hurtig løsning. Hver MFE kan læse fra og skrive til det.

Det er dog ikke reaktivt, hvilket betyder, at MFE'er ikke automatisk opdateres, når Local Storage ændres. Det egner sig heller ikke til kompleks tilstand eller tilstand i realtid.

Prøv at gemme og hente et element:

localStorage.setItem('appTheme', 'dark');
console.log('Theme set to dark.');

const currentTheme = localStorage.getItem('appTheme');
console.log('Current theme:', currentTheme);

// To remove:
// localStorage.removeItem('appTheme');
// console.log('Theme removed.');

Centraliserede tilstandsregistre

Til mere kompleks og reaktiv delt tilstand er et centraliseret tilstandsregister et almindeligt mønster. Biblioteker som Redux er populære eksempler.

Én sandhedskilde for applikationens tilstand.
Forudsigelige tilstandsændringer gennem handlinger og reduceringsfunktioner.
Nem fejlfinding og sporbarhed for ændringer i tilstanden.

I en fødereret opsætning kan en vært eller en dedikeret fjern-MFE eksponere et sådant register, som andre kan bruge.

Opbygning af et enkelt globalt tilstandsregister

Lad os oprette et grundlæggende, framework-uafhængigt globalt tilstandsregister. Dette register indeholder vores delte tilstand og giver komponenter mulighed for at abonnere på ændringer. Det efterligner på et overordnet niveau den måde, et Redux-register fungerer på.

Kør denne kode for at se et enkelt tilstandsregister i funktion:

let sharedState = { userStatus: 'loggedOut', notifications: [] };
const subscribers = [];

function getSharedState() {
  return sharedState;
}

function dispatchAction(action) {
  switch (action.type) {
    case 'LOGIN':
      sharedState = { ...sharedState, userStatus: 'loggedIn' };
      break;
    case 'ADD_NOTIFICATION':
      sharedState = { ...sharedState, notifications: [...sharedState.notifications, action.payload] };
      break;
    default:
      return;
  }
  subscribers.forEach(cb => cb(sharedState));
}

function subscribe(callback) {
  subscribers.push(callback);
  return () => {
    const index = subscribers.indexOf(callback);
    if (index > -1) subscribers.splice(index, 1);
  };
}

// --- Example Usage ---
console.log('Initial state:', getSharedState());
const unsubscribe = subscribe(newState => {
  console.log('State updated:', newState);
});

dispatchAction({ type: 'LOGIN' });
dispatchAction({ type: 'ADD_NOTIFICATION', payload: 'Welcome!' });

unsubscribe();
console.log('Unsubscribed from updates.');

Brug af det globale tilstandsregister

Forestil dig nu, at forskellige mikrofrontends skal reagere på ændringer i dette globale tilstandsregister. De vil bruge funktionerne getSharedState og subscribe.

Dette eksempel viser, hvordan to »virtuelle« MFE'er kan interagere med det delte tilstandsregister og reagere på opdateringer.

let sharedState = { userStatus: 'loggedOut', notifications: [] };
const subscribers = [];

function getSharedState() { return sharedState; }
function dispatchAction(action) {
  switch (action.type) {
    case 'LOGIN': sharedState = { ...sharedState, userStatus: 'loggedIn' }; break;
    case 'ADD_NOTIFICATION': sharedState = { ...sharedState, notifications: [...sharedState.notifications, action.payload] }; break;
    case 'LOGOUT': sharedState = { ...sharedState, userStatus: 'loggedOut' }; break;
    default: return;
  }
  subscribers.forEach(cb => cb(sharedState));
}
function subscribe(callback) {
  subscribers.push(callback);
  return () => { const index = subscribers.indexOf(callback); if (index > -1) subscribers.splice(index, 1); };
}

// --- MFE A (e.g., Header Component) ---
function handleUserStatusChange(state) {
  console.log('MFE A: User status is now', state.userStatus);
}
const unsubscribeMFEA = subscribe(handleUserStatusChange);

// --- MFE B (e.g., Notification Bell) ---
function handleNotificationsChange(state) {
  console.log('MFE B: Notifications:', state.notifications.length);
}
const unsubscribeMFEB = subscribe(handleNotificationsChange);

// Simulate actions from other MFEs or host
dispatchAction({ type: 'LOGIN' });
dispatchAction({ type: 'ADD_NOTIFICATION', payload: 'New message!' });
dispatchAction({ type: 'LOGOUT' });

unsubscribeMFEA();
unsubscribeMFEB();

React Context API til MFE'er

Hvis alle dine mikrofrontends er bygget med React, kan Context API være en effektiv måde at dele tilstand på. En Context gør det muligt at sende data gennem komponenttræet uden manuelt at skulle sende props ned på hvert niveau.

Opret en Context i et delt bibliotek eller en værts-MFE.
Eksponér denne Context via Module Federation.
Fjern-MFE'er kan derefter bruge denne Context direkte.

Denne tilgang fungerer godt, når alle fødererede applikationer befinder sig i det samme React-økosystem.

Deling af React Context (koncept)

For at dele React Context vil du typisk:

Definere Context: Opret MyContext.js i en delt hjælpe-MFE.
Eksponere Context: Brug Module Federation til at eksponere MyContext.Provider og useContext(MyContext).
Levere Context: Værts-MFE'en (eller en overordnet MFE) omslutter sine børn (herunder fjern-MFE'er) med <MyContext.Provider value={...}>.
Bruge Context: Enhver fjern-MFE kan derefter importere og bruge useContext(MyContext) for at få adgang til den delte tilstand.

Det giver en dybt indlejret komponent i en fjern-MFE adgang til tilstand, der leveres af en overordnet MFE.

Spørgsmål: Fordele ved delt tilstand

Du har lært om forskellige tilgange til håndtering af delt tilstand i mikrofrontends.

Hvilken af følgende er en primær fordel ved at implementere robust håndtering af delt tilstand i en mikrofrontend-arkitektur?

Besvar den i den interaktive lektion

Opsummering: Håndtering af delt tilstand

Vi har gennemgået de vigtigste strategier til håndtering af delt tilstand i mikrofrontends:

Behov: Afgørende for en ensartet brugeroplevelse og et sammenhængende dataflow på tværs af uafhængige MFE'er.
Udfordringer: Opretholdelse af isolation, kompatibilitet mellem frameworks og håndtering af kompleksitet.
Enkle metoder: Local Storage til grundlæggende, ikke-reaktive data.
Centraliserede registre: Brug af mønstre som Redux til at oprette én sandhedskilde, der er tilgængelig for alle MFE'er.
React Context: En effektiv løsning til deling af tilstand, når alle MFE'er befinder sig i React-økosystemet.

Valget af den rette strategi afhænger af dit teams behov, valg af framework og kompleksiteten af de delte data.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Håndtering af delt tilstand” gratis?

Ja — hele teksten til “Håndtering af delt tilstand” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Håndtering af delt tilstand”?

Udforsk strategier til håndtering af delt tilstand på tværs af federerede applikationer, eksempelvis Redux eller Context API. Du øver dig i Mikrofrontendarkitektur med Module Federation med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mikrofrontendarkitektur med Module Federation?

Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Håndtering af delt tilstand”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mikrofrontendarkitektur med Module Federation-lektion?

Ja. Alle Mikrofrontendarkitektur med Module Federation-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Event bus til kommunikation på tværs af apps
Håndtering af delt tilstand
Brugerdefinerede kommunikationsløsninger
Kommunikation med brugerdefinerede DOM-hændelser

← Tilbage til Mikrofrontendarkitektur med Module Federation