Estado compartilhado e roteamento entre MFEs
Compartilhe um barramento global de eventos ou contexto entre microfrontends e coordene o roteamento no cliente.
Estado compartilhado e roteamento entre MFEs é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O desafio do compartilhamento de estado
Microfrontends em pacotes diferentes não podem compartilhar diretamente estado ou contexto do React. Eles precisam de estratégias alternativas: eventos personalizados, gerenciadores de estado compartilhados, URL ou um barramento de eventos de publicação e assinatura.
Eventos personalizados do navegador
Use a API CustomEvent do navegador como um barramento de eventos simples entre microfrontends, sem acoplá-los.
// 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);
}, []);Biblioteca de barramento de eventos compartilhado
Uma pequena biblioteca de publicação e assinatura compartilhada (por meio do Module Federation ou de uma instância única carregada por URL) fornece um barramento de eventos tipado acessível a todos os 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;A URL como estado compartilhado
A URL (caminho + parâmetros de consulta) é compartilhada naturalmente entre todos os MFE. Use-a para estados de navegação, como item selecionado, aba ativa ou valores de filtro.
// 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');Arquitetura de roteamento
Normalmente, a aplicação contêiner/hospedeira é responsável pelo roteador de nível superior. Os microfrontends remotos recebem o caminho atual e uma função de retorno de chamada navigate como propriedades.
// 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 com Module Federation
Cada MFE pode executar seu próprio React Router, restrito ao seu caminho base. O roteador da aplicação hospedeira gerencia a navegação de nível superior; cada aplicação remota gerencia a subnavegação de forma independente.
// Remote App component:
export function ProductsApp({ basepath = '/products' }) {
return (
<BrowserRouter basename={basepath}>
<Routes>
<Route path="/" element={<ProductList />} />
<Route path="/:id" element={<ProductDetail />} />
</Routes>
</BrowserRouter>
);
}Estado de autenticação compartilhado
O estado de autenticação (usuário, token) normalmente pertence à aplicação contêiner e é transmitido às aplicações remotas como propriedades ou exposto por meio de um gerenciador de estado compartilhado e único.
// Host provides auth via props:
<RemoteCheckout
userId={currentUser.id}
token={accessToken}
onLogout={handleLogout}
/>Zustand como gerenciador de estado compartilhado
Ao compartilhar um gerenciador de estado Zustand por meio do Module Federation (como uma instância única), todos os MFE leem da mesma instância do gerenciador na memória.
// 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 configAntipadrões de comunicação entre MFE
Evite: cadeias de funções de retorno de chamada profundamente aninhadas, o compartilhamento do estado interno de componentes ou o acoplamento rígido às APIs internas de outro MFE. Limite a comunicação a eventos de alto nível e contratos públicos.
Testes de interações entre MFE
Teste os contratos de eventos (nomes dos eventos e formatos dos dados) separadamente da interface. Use testes de contrato para verificar se o produtor e o consumidor concordam sobre o esquema do evento.
Verificação rápida
Qual é a maneira mais simples de compartilhar o estado de navegação/filtro entre vários microfrontends sem acoplá-los?
Resumo
Compartilhe o estado entre MFE por meio de eventos personalizados, um barramento de eventos único, a URL ou gerenciadores de estado compartilhados (Zustand/instância única). A aplicação contêiner é responsável pelo roteador de nível superior e transmite o caminho base + navigate às aplicações remotas. Mantenha os contratos entre MFE abrangentes e bem tipados.
Perguntas Frequentes
A aula “Estado compartilhado e roteamento entre MFEs” é grátis?
Sim — o texto completo de “Estado compartilhado e roteamento entre MFEs” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Estado compartilhado e roteamento entre MFEs”?
Compartilhe um barramento global de eventos ou contexto entre microfrontends e coordene o roteamento no cliente. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Estado compartilhado e roteamento entre MFEs”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conceitos e compensações de microfrontends
- Federação de módulos com Webpack 5
- Estado compartilhado e roteamento entre MFEs
- Implantação independente e pipelines de CI para MFEs