Compartilhando Estado e Utilitários entre Remotos
Aprenda padrões avançados para compartilhar com segurança, entre remotos federados, não apenas bibliotecas, mas também armazenamentos com estado, tokens de design e módulos utilitários.
Compartilhando Estado e Utilitários entre Remotos é uma aula grátis de Micro Frontends Architecture with Module Federation no CoddyKit. Esta é a aula 4 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 Micro Frontends Architecture with Module Federation, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Beyond Libraries
Module Federation can share more than third-party libraries. You can expose your own stateful stores, utilities, and design tokens so all remotes use one consistent source.
Sharing a Utility Module
Expose a shared utilities package from one app and consume it everywhere, eliminating copy-pasted helper code.
exposes: { "./format": "./src/utils/format" }
// elsewhere
import { formatPrice } from "shared/format";Sharing Design Tokens
Expose colors, spacing, and typography as a shared module so every micro frontend stays visually consistent without bundling its own copy of the theme.
exposes: { "./tokens": "./src/theme/tokens" }Sharing a State Store
A shared store (e.g. a Redux or Zustand instance) lets remotes read and update common data. The key is sharing a single instance, not separate copies.
Why Singleton Matters for State
If two remotes each load their own store, their state diverges. Marking the store package singleton: true guarantees they share the same live instance.
shared: {
"@app/store": { singleton: true }
}Exposing the Store Instance
Expose the already-created store, not a factory, so consumers attach to the same object.
import { createStore } from "./store";
export const store = createStore();
// exposes: { "./store": "./src/store-instance" }Consuming Shared State
Remotes import the shared store and subscribe to it like any local store, but updates from any remote are visible to all.
import { store } from "shell/store";
store.subscribe(() => render(store.getState()));The Coupling Trade-off
Shared mutable state increases coupling. Overuse recreates the tight dependencies micro frontends try to avoid. Share state only for truly cross-cutting concerns like auth or cart.
Prefer Events for Loose Coupling
Where possible, prefer a shared event channel over a shared mutable store. Events keep remotes decoupled while still letting them react to each other.
Versioning Shared State Contracts
Treat the shape of shared state and utilities as a public contract. Changing it is a breaking change, so version it and communicate updates to consuming teams.
A Layered Sharing Strategy
A healthy strategy layers sharing:
- Libraries: share freely (React, etc.)
- Utilities and tokens: share for consistency
- Mutable state: share sparingly and deliberately
Quick Check
Test your advanced sharing knowledge.
Recap
You learned advanced sharing:
- Share utilities and design tokens for consistency
- Share a singleton store for cross-cutting state
- Expose the instance, not a factory
- Prefer events to limit coupling
- Version shared contracts carefully
Thoughtful sharing balances consistency with independence.
Perguntas Frequentes
A aula “Compartilhando Estado e Utilitários entre Remotos” é grátis?
Sim — o texto completo de “Compartilhando Estado e Utilitários entre Remotos” é 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 Micro Frontends Architecture with Module Federation, atualize para CoddyKit PRO. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.
O que vou aprender em “Compartilhando Estado e Utilitários entre Remotos”?
Aprenda padrões avançados para compartilhar com segurança, entre remotos federados, não apenas bibliotecas, mas também armazenamentos com estado, tokens de design e módulos utilitários. Você pratica Micro Frontends Architecture with Module Federation 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 Micro Frontends Architecture with Module Federation?
Nenhuma experiência prévia é necessária. Micro Frontends Architecture with Module Federation 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 4 de 4.
Quanto tempo leva a aula “Compartilhando Estado e Utilitários entre Remotos”?
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 Micro Frontends Architecture with Module Federation?
Sim. Cada aula de Micro Frontends Architecture with Module Federation 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
- Consumo de dependências compartilhadas
- Módulos singleton e controle de versões
- Carregamento dinâmico de módulos
- Compartilhando Estado e Utilitários entre Remotos