Uso compartido de estado y utilidades entre remotos
Aprenda patrones avanzados para compartir de forma segura, además de bibliotecas, almacenes con estado, tokens de diseño y módulos de utilidades entre remotos federados.
Uso compartido de estado y utilidades entre remotos es una lección gratuita de Micro Frontends Architecture with Module Federation en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Micro Frontends Architecture with Module Federation, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Uso compartido de estado y utilidades entre remotos» es gratis?
Sí — el texto completo de «Uso compartido de estado y utilidades entre remotos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Micro Frontends Architecture with Module Federation, actualiza a CoddyKit PRO. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.
¿Qué aprenderé en «Uso compartido de estado y utilidades entre remotos»?
Aprenda patrones avanzados para compartir de forma segura, además de bibliotecas, almacenes con estado, tokens de diseño y módulos de utilidades entre remotos federados. Practicas Micro Frontends Architecture with Module Federation con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Micro Frontends Architecture with Module Federation?
No se requiere experiencia previa. Micro Frontends Architecture with Module Federation en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Uso compartido de estado y utilidades entre remotos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Micro Frontends Architecture with Module Federation?
Sí. Cada lección de Micro Frontends Architecture with Module Federation incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Consumo de dependencias compartidas
- Módulos Singleton y control de versiones
- Carga dinámica de módulos
- Uso compartido de estado y utilidades entre remotos