Współdzielony stan i routing między MFE
Współdzielenie globalnej magistrali zdarzeń lub kontekstu między mikrofrontendami oraz koordynowanie routingu po stronie klienta.
Współdzielony stan i routing między MFE to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Wyzwanie związane ze współdzieleniem stanu
Mikrofrontendy znajdujące się w różnych bundlach nie mogą bezpośrednio współdzielić stanu Reacta ani kontekstu. Potrzebują alternatywnych strategii: własnych zdarzeń, współdzielonych magazynów stanu, adresu URL lub magistrali zdarzeń pub/sub.
Własne zdarzenia przeglądarki
Interfejsu API CustomEvent przeglądarki można użyć jako prostej magistrali zdarzeń między mikrofrontendami, bez ścisłego wiązania ich ze sobą.
// 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);
}, []);Współdzielona biblioteka magistrali zdarzeń
Niewielka współdzielona biblioteka pub/sub (udostępniana przez Module Federation lub singleton ładowany z adresu URL) zapewnia typowaną magistralę zdarzeń dostępną dla wszystkich MFE.
// 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 jako współdzielony stan
Adres URL (ścieżka i parametry zapytania) jest naturalnie współdzielony przez wszystkie MFE. Należy używać go do przechowywania stanu nawigacji, takiego jak wybrany element, aktywna karta lub wartości filtrów.
// 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');Architektura routingu
Zazwyczaj aplikacja shell/host zarządza routerem najwyższego poziomu. Zdalne mikrofrontendy otrzymują bieżącą ścieżkę oraz funkcję zwrotną navigate jako właściwości.
// 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 z Module Federation
Każdy MFE może uruchamiać własny React Router ograniczony do swojej ścieżki bazowej. Router hosta obsługuje nawigację najwyższego poziomu, a każdy remote niezależnie obsługuje nawigację podrzędną.
// Remote App component:
export function ProductsApp({ basepath = '/products' }) {
return (
<BrowserRouter basename={basepath}>
<Routes>
<Route path="/" element={<ProductList />} />
<Route path="/:id" element={<ProductDetail />} />
</Routes>
</BrowserRouter>
);
}Współdzielony stan uwierzytelniania
Stan uwierzytelniania (użytkownik, token) jest zazwyczaj zarządzany przez shell i przekazywany aplikacjom remote jako właściwości lub udostępniany za pośrednictwem współdzielonego singletonowego magazynu.
// Host provides auth via props:
<RemoteCheckout
userId={currentUser.id}
token={accessToken}
onLogout={handleLogout}
/>Zustand jako współdzielony magazyn
Podczas współdzielenia magazynu Zustand za pomocą Module Federation (jako singletonu) wszystkie MFE odczytują dane z tej samej instancji magazynu w pamięci.
// 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 configAntywzorce komunikacji między MFE
Należy unikać głęboko zagnieżdżonych łańcuchów funkcji zwrotnych, współdzielenia wewnętrznego stanu komponentów oraz ścisłego powiązania z wewnętrznymi interfejsami API innego MFE. Komunikację należy ograniczyć do ogólnych zdarzeń i publicznych kontraktów.
Testowanie interakcji między MFE
Kontrakty zdarzeń (nazwy zdarzeń i struktury danych) należy testować niezależnie od interfejsu użytkownika. Testowanie kontraktowe pozwala sprawdzić, czy producent i konsument uzgadniają ten sam schemat zdarzeń.
Szybki test
Jaki jest najprostszy sposób współdzielenia stanu nawigacji lub filtrów między wieloma mikrofrontendami bez ścisłego ich wiązania?
Podsumowanie
Stan między MFE można współdzielić za pomocą własnych zdarzeń, singletonowej magistrali zdarzeń, adresu URL lub współdzielonych magazynów (Zustand/singleton). Shell zarządza routerem najwyższego poziomu i przekazuje aplikacjom remote ścieżkę bazową oraz funkcję navigate. Kontrakty między MFE powinny być ogólne i dobrze typowane.
Często zadawane pytania
Czy lekcja „Współdzielony stan i routing między MFE” jest bezpłatna?
Tak — pełny tekst „Współdzielony stan i routing między MFE” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Współdzielony stan i routing między MFE”?
Współdzielenie globalnej magistrali zdarzeń lub kontekstu między mikrofrontendami oraz koordynowanie routingu po stronie klienta. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Współdzielony stan i routing między MFE”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Koncepcje mikrofrontendów i kompromisy
- Module Federation z Webpack 5
- Współdzielony stan i routing między MFE
- Niezależne wdrażanie i potoki CI dla MFE