> Как передать данные с одного микрофронтенда на другой в React? (React)

Короткий ответ

Данные между микрофронтендами в React передаются через общее хранилище (shared store), кастомные события (CustomEvents), глобальный объект window, шину событий (event bus) или через iframe с postMessage. Выбор зависит от архитектуры: при использовании Module Federation часто применяют shared state через Redux или MobX, а при iframe-подходе - postMessage. Важно минимизировать прямую связанность и использовать изолированные контракты.

Подробное объяснение

Передача данных между микрофронтендами - ключевая задача при построении микросервисной архитектуры на фронтенде. Основные подходы:

1. Глобальное хранилище (shared store): создаётся общий Redux store или MobX store, который подключается к каждому микрофронтенду. Данные синхронизируются через подписки. Требует единой версии библиотеки и осторожности с конфликтами.

2. Кастомные события (CustomEvents): dispatchEvent на document или window. Микрофронтенды подписываются на события и обмениваются данными. Просто, но нет типизации и сложно отлаживать.

3. Event bus: отдельный модуль (например, на основе RxJS Subject), который импортируется всеми микрофронтендами. Обеспечивает слабую связанность и возможность фильтрации событий.

4. postMessage: для iframe-архитектуры. Безопасно, но асинхронно и требует сериализации данных.

5. Module Federation shared modules: Webpack 5 позволяет шарить библиотеки (React, Redux) между микрофронтендами. Можно экспортировать единый store или контекст.

6. URL/query parameters: для простых данных (id, токены). Ограничено по объёму и типу.

Ключевые trade-off: производительность (частые обновления глобального store), сложность отладки (CustomEvents), безопасность (postMessage), связанность (shared store).

На практике

Для реального проекта выбор зависит от сценария:

• Общие данные пользователя (auth token, профиль): лучше через shared store или event bus, так как данные нужны почти всем микрофронтендам.
• Команды навигации (перейти на другой микрофронтенд): через кастомные события или event bus.
• Данные формы, которая распределена по микрофронтендам: через shared store с единым редьюсером.
• Изолированные виджеты (чат, уведомления): через postMessage, если они в iframe.

Типичная архитектура: каждый микрофронтенд имеет свой локальный state, а для межсервисного общения используется выделенный event bus модуль, который импортируется как shared dependency через Module Federation.

Пример кода

JAVASCRIPT
// eventBus.js - общий модуль для всех микрофронтендов
import { Subject } from 'rxjs';

const eventBus = new Subject();

export const publish = (eventType, payload) => {
  eventBus.next({ type: eventType, payload });
};

export const subscribe = (eventType, callback) => {
  return eventBus.subscribe(event => {
    if (event.type === eventType) {
      callback(event.payload);
    }
  });
};

JAVASCRIPT
// Микрофронтенд A - отправка данных
import { publish } from './eventBus';

const handleUserLogin = (user) => {
  publish('USER_LOGIN', { id: user.id, name: user.name });
};

JAVASCRIPT
// Микрофронтенд B - получение данных
import { subscribe } from './eventBus';
import { useEffect } from 'react';

const UserProfile = () => {
  useEffect(() => {
    const subscription = subscribe('USER_LOGIN', (user) => {
      console.log('Получен пользователь:', user);
      // обновить локальный state
    });
    return () => subscription.unsubscribe();
  }, []);

  return <div>User profile</div>;
};

Как отвечать на собеседовании

1. Начни с краткого перечисления основных подходов.
2. Объясни, что выбор зависит от архитектуры (Module Federation vs iframe vs standalone).
3. Упомяни trade-off: связанность vs производительность, типизация vs гибкость.
4. Приведи пример из реального проекта, если есть.
5. Подчеркни важность изоляции и контрактов между микрофронтендами.
6. Если спросят про безопасность - упомяни postMessage и валидацию origin.

Что проверяет интервьюер

• Понимание принципов микросервисной архитектуры на фронтенде.
• Знание конкретных механизмов React и Webpack (Module Federation).
• Умение оценивать trade-off и выбирать подходящий подход под задачу.
• Навыки проектирования слабосвязанных систем.
• Понимание проблем производительности и отладки.

Типичные ошибки

• Предлагать только один способ без анализа контекста.
• Использовать глобальный window для сложных данных - приводит к конфликтам и трудно отлаживается.
• Забывать про очистку подписок (memory leaks).
• Передавать слишком много данных через URL.
• Не учитывать версионирование shared библиотек (особенно React).
• Использовать iframe без postMessage и проверки origin.