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

В микрофронтендах на React данные между изолированными приложениями можно передавать несколькими способами, в зависимости от архитектуры.

1. Через глобальное состояние (Event Bus) Самый простой способ - использовать шину событий на основе window или CustomEvent.

JAVASCRIPT
// Микрофронтенд A (отправитель)
window.dispatchEvent(new CustomEvent('user-login', { detail: { userId: 123 } }));

// Микрофронтенд B (получатель)
useEffect(() => {
  const handler = (event) => {
    console.log('Получен userId:', event.detail.userId);
  };
  window.addEventListener('user-login', handler);
  return () => window.removeEventListener('user-login', handler);
}, []);

2. Через общий контейнер (Shell) Если микрофронтенды монтируются в единый контейнер (например, Module Federation), можно передавать пропсы или использовать React Context на уровне контейнера.

JAVASCRIPT
// В контейнере (Shell)
<MicroFrontendA onUserLogin={(id) => setSharedUserId(id)} />
<MicroFrontendB sharedUserId={sharedUserId} />

3. Через общее хранилище (Shared Store) Для сложных сценариев - Redux или Zustand с общим экземпляром, доступным через глобальную переменную.

JAVASCRIPT
// Общий store (например, через window.__sharedStore)
import { createStore } from 'zustand/vanilla';
window.__sharedStore = createStore((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

4. Через URL или localStorage Для простых данных (токены, ID) - передача через query-параметры или localStorage с подпиской на storage event.

Рекомендация: Для React-микрофронтендов с Module Federation чаще всего используют Event Bus или пропсы от контейнера. Избегайте прямого импорта друг друга - это нарушает изоляцию.