Как организовать state в микрофронтендах?

Микрофронтенды — это архитектурный стиль, при котором веб-приложение разбивается на независимые, автономные части, разрабатываемые и развертываемые отдельно. Управление состоянием в такой системе — нетривиальная задача, так как нужно балансировать между независимостью модулей и необходимостью обмена данными.

Основные подходы к управлению состоянием

• Изолированное состояние (Isolated State): Каждый микрофронтенд (MFE) управляет своим собственным состоянием внутри своего бандла. Это идеально для максимальной независимости и переиспользования. Однако, если MFE нужно отображать одни и те же данные (например, данные пользователя), их придется загружать несколько раз.
• Общее состояние через Event Bus: MFE общаются друг с другом, публикуя и слушая события. Это можно реализовать через нативный CustomEvent API браузера или библиотеки типа mitt. Например, при обновлении корзины в одном MFE можно отправить событие, на которое подпишутся другие модули, отображающие количество товаров.
• Общее глобальное состояние (Shared Global State): Создается единое хранилище (например, экземпляр Redux, MobX или даже простой объект в window), доступное для всех MFE. За его инициализацию и предоставление обычно отвечает хост-приложение (shell). Этот подход требует четких контрактов и может увеличить связность.
• Состояние на уровне URL и браузера: Часть состояния (например, ID выбранного элемента, параметры фильтра) можно хранить в query-параметрах URL или в localStorage/sessionStorage. Это простой способ синхронизации между MFE, которые монтируются на одной странице.

Практический пример с Event Bus

Рассмотрим простой пример, где два независимых микрофронтенда обмениваются информацией о пользователе.

// В хост-приложении или общем модуле создаем простой Event Bus
const eventBus = {
  events: {},
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  },
  emit(event, data) {
    (this.events[event] || []).forEach(cb => cb(data));
  }
};

// Микрофронтенд A (например, заголовок) подписывается на обновление имени пользователя
eventBus.on('user-updated', (userData) => {
  document.getElementById('user-name').textContent = userData.name;
});

// Микрофронтенд B (форма входа) публикует событие после успешного логина
function handleLoginSuccess(user) {
  // ... логика MFE B
  eventBus.emit('user-updated', { name: user.name, id: user.id });
}

Рекомендации и вывод

Выбор подхода зависит от уровня интеграции между микрофронтендами. Начинайте с максимальной изоляции, добавляя механизмы общего состояния (Event Bus, параметры URL) только по мере реальной необходимости. Избегайте прямых зависимостей между бандлами MFE. Общее глобальное хранилище стоит применять для действительно критичных для всего приложения данных, таких как аутентификация или тема оформления, и тщательно управлять его схемой.

Итог: Изолированное состояние — основа независимости микрофронтендов. Event Bus и параметры URL — хорошие инструменты для слабой связи. Общее глобальное хранилище используйте осмотрительно для сквозной функциональности, чтобы не превратить микрофронтенды в монолит на уровне данных.