Architectuur van micro-frontends met Module Federation · Les

Gedeeld statebeheer

Verken strategieën voor het beheren van gedeelde state in gefedereerde applicaties, zoals Redux of Context API.

Les 2 van 411 stappen

Gedeeld statebeheer is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Wat is gedeelde status?

In micro-frontends verwijst gedeelde status naar gegevens die toegankelijk en consistent moeten zijn in verschillende, onafhankelijk ontwikkelde en geïmplementeerde toepassingen.

Denk aan de authenticatiestatus van een gebruiker, globale thema-instellingen of de inhoud van een winkelmandje.
Deze status is niet eigendom van één micro-frontend, maar is wel cruciaal voor een samenhangende gebruikerservaring.

Effectief beheer van deze status is essentieel voor het bouwen van complexe gefedereerde toepassingen.

Waarom gedeelde status in MFE's?

Wanneer meerdere micro-frontends samen één gebruikersinterface vormen, moeten ze vaak reageren op dezelfde globale informatie.

Gebruikerservaring: Een gebruiker meldt zich aan bij één MFE en andere MFE's moeten weten dat de gebruiker is geauthenticeerd.
Consistentie: Een globale themavoorkeur toepassen op alle onderdelen van de applicatie.
Gegevensstroom: Gegevens doorgeven van de ene MFE (bijvoorbeeld een productselectie) naar een andere (bijvoorbeeld het afrekenen).

Zonder gedeelde status zou elke MFE haar eigen geïsoleerde gegevens beheren, wat tot inconsistenties en een onsamenhangende gebruikerservaring leidt.

Uitdagingen van gedeelde status

Hoewel het essentieel is, brengt het delen van status in een micro-frontendarchitectuur unieke uitdagingen met zich mee:

Isolatie: MFE's zijn ontworpen om onafhankelijk te zijn. Het doorbreken van deze isolatie vereist zorgvuldige planning.
Frameworkonafhankelijkheid: Verschillende MFE's kunnen verschillende JavaScript-frameworks gebruiken (React, Angular, Vue).
Prestaties: Inefficiënt delen kan leiden tot het meerdere keren ophalen van gegevens of trage updates.
Complexiteit: Het bepalen van eigenaarschap en updatemechanismen en het voorkomen van conflicten kan complex zijn.

We hebben strategieën nodig die onafhankelijkheid in balans brengen met de noodzaak om informatie te delen.

Eenvoudige gedeelde status: Local Storage

Voor zeer eenvoudige, niet-gevoelige en persistente status kan de Local Storage van de browser een snelle oplossing zijn. Elke MFE kan gegevens lezen uit en schrijven naar deze opslag.

Deze opslag is echter niet reactief. Dat betekent dat MFE's niet automatisch worden bijgewerkt wanneer Local Storage verandert. Ook is deze oplossing niet geschikt voor complexe of realtime status.

Probeer een item in te stellen en op te halen:

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.');

Gecentraliseerde statusopslag

Voor complexere en reactieve gedeelde status is een gecentraliseerde statusopslag een veelgebruikt patroon. Bibliotheken zoals Redux zijn populaire voorbeelden.

Eén bron van waarheid voor de status van je applicatie.
Voorspelbare statuswijzigingen via acties en reducers.
Eenvoudiger fouten opsporen en wijzigingen in de status traceren.

In een gefedereerde opstelling kan een host of een speciale externe MFE zo'n statusopslag beschikbaar stellen voor andere MFE's.

Een eenvoudige globale statusopslag bouwen

Laten we een eenvoudige, frameworkonafhankelijke globale statusopslag maken. Deze statusopslag bevat onze gedeelde status en stelt componenten in staat zich op wijzigingen te abonneren. Op hoofdlijnen bootst dit na hoe een Redux-statusopslag werkt.

Voer deze code uit om een eenvoudige statusopslag in actie te zien:

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.');

De globale statusopslag gebruiken

Stel je nu voor dat verschillende micro-frontends moeten reageren op wijzigingen in deze globale statusopslag. Ze zouden daarvoor de functies getSharedState en subscribe gebruiken.

Dit voorbeeld laat zien hoe twee 'virtuele' MFE's met de gedeelde statusopslag kunnen samenwerken en op updates kunnen reageren.

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 voor MFE's

Als al je micro-frontends met React zijn gebouwd, kan de Context API een krachtige manier zijn om status te delen. Een Context biedt een manier om gegevens door de componentenboom door te geven zonder dat je props op elk niveau handmatig hoeft door te geven.

Maak een Context in een gedeelde bibliotheek of een host-MFE.
Stel deze Context beschikbaar via Module Federation.
Externe MFE's kunnen deze Context vervolgens rechtstreeks gebruiken.

Deze aanpak werkt goed wanneer alle gefedereerde applicaties deel uitmaken van hetzelfde React-ecosysteem.

React Context delen (concept)

Om React Context te delen, doe je doorgaans het volgende:

Context definiëren: Maak MyContext.js in een gedeelde hulpprogramma-MFE.
Context beschikbaar stellen: Gebruik Module Federation om MyContext.Provider en useContext(MyContext) beschikbaar te stellen.
Context aanbieden: De host-MFE (of een bovenliggende MFE) wikkelt haar onderliggende componenten, inclusief externe MFE's, in met <MyContext.Provider value={...}>.
Context gebruiken: Elke externe MFE kan vervolgens useContext(MyContext) importeren en gebruiken om toegang te krijgen tot de gedeelde status.

Hierdoor kan een diep geneste component in een externe MFE toegang krijgen tot status die door een bovenliggende MFE wordt aangeboden.

Vraag: voordelen van gedeelde status

Je hebt verschillende manieren geleerd om gedeelde status in micro-frontends te beheren.

Wat is een belangrijk voordeel van robuust statusbeheer in een micro-frontendarchitectuur?

Beantwoord dit in de interactieve les

Samenvatting: beheer van gedeelde status

We hebben belangrijke strategieën voor het beheren van gedeelde status in micro-frontends onderzocht:

Noodzaak: Essentieel voor een consistente gebruikerservaring en gegevensstroom tussen onafhankelijke MFE's.
Uitdagingen: Isolatie behouden, compatibiliteit tussen frameworks waarborgen en complexiteit beheren.
Eenvoudige methoden: Local Storage voor eenvoudige, niet-reactieve gegevens.
Gecentraliseerde statusopslag: Patronen zoals Redux gebruiken om één bron van waarheid te creëren die voor alle MFE's toegankelijk is.
React Context: Een effectieve oplossing voor het delen van status wanneer alle MFE's deel uitmaken van het React-ecosysteem.

De juiste strategie hangt af van de behoeften van je team, de gekozen frameworks en de complexiteit van de gedeelde gegevens.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Gedeeld statebeheer” gratis?

Ja — de volledige tekst van “Gedeeld statebeheer” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.

Wat leer ik in “Gedeeld statebeheer”?

Verken strategieën voor het beheren van gedeelde state in gefedereerde applicaties, zoals Redux of Context API. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?

Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Gedeeld statebeheer”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?

Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Architectuur van micro-frontends met Module Federation