Condividere stato e utility tra i remote
Impari pattern avanzati per condividere in sicurezza tra i remote federati non solo librerie, ma anche store con stato, token di design e moduli utility.
Condividere stato e utility tra i remote è una lezione Micro Frontends Architecture with Module Federation gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Micro Frontends Architecture with Module Federation, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Condividere stato e utility tra i remote» è gratuita?
Sì — il testo completo di «Condividere stato e utility tra i remote» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Micro Frontends Architecture with Module Federation, passa a CoddyKit PRO. Il corso Micro Frontends Architecture with Module Federation include 4 lezioni in totale.
Cosa imparerò in «Condividere stato e utility tra i remote»?
Impari pattern avanzati per condividere in sicurezza tra i remote federati non solo librerie, ma anche store con stato, token di design e moduli utility. Eserciti Micro Frontends Architecture with Module Federation con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Micro Frontends Architecture with Module Federation?
Non è richiesta alcuna esperienza precedente. Micro Frontends Architecture with Module Federation su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Condividere stato e utility tra i remote»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Micro Frontends Architecture with Module Federation?
Sì. Ogni lezione Micro Frontends Architecture with Module Federation include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Utilizzo delle dipendenze condivise
- Moduli singleton e versionamento
- Caricamento dinamico dei moduli
- Condividere stato e utility tra i remote