0Pricing
Micro Frontends Architecture with Module Federation · Урок

Общий доступ к состоянию и утилитам между удалёнными приложениями

Изучите продвинутые шаблоны безопасного совместного использования между федеративными удалёнными приложениями не только библиотек, но и хранилищ состояния, токенов дизайна и модулей-утилит.

«Общий доступ к состоянию и утилитам между удалёнными приложениями» — бесплатный урок Micro Frontends Architecture with Module Federation на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Micro Frontends Architecture with Module Federation, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «Общий доступ к состоянию и утилитам между удалёнными приложениями» бесплатный?

Да — полный текст урока «Общий доступ к состоянию и утилитам между удалёнными приложениями» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Micro Frontends Architecture with Module Federation, подпишись на CoddyKit PRO. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.

Чему я научусь в уроке «Общий доступ к состоянию и утилитам между удалёнными приложениями»?

Изучите продвинутые шаблоны безопасного совместного использования между федеративными удалёнными приложениями не только библиотек, но и хранилищ состояния, токенов дизайна и модулей-утилит. Ты практикуешь Micro Frontends Architecture with Module Federation с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Micro Frontends Architecture with Module Federation?

Предыдущий опыт не требуется. Micro Frontends Architecture with Module Federation на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Общий доступ к состоянию и утилитам между удалёнными приложениями»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Micro Frontends Architecture with Module Federation?

Да. Каждый урок Micro Frontends Architecture with Module Federation включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Подключение общих зависимостей
  2. Синглтон-модули и управление версиями
  3. Динамическая загрузка модулей
  4. Общий доступ к состоянию и утилитам между удалёнными приложениями
← Назад к Micro Frontends Architecture with Module Federation