Как организовать обмен состоянием и навигацию между микрофронтендами, чтобы не получить жёсткую связанность?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Обмен состоянием

1. События (Event Bus):

   • Что это: Использование событий для передачи данных между микрофронтендами.
   • Как работает: Один микрофронтенд может "вызвать" событие, а другой — "подписаться" на него и реагировать.
   • Пример:

     // Микрофронтенд A
     const event = new CustomEvent('userLoggedIn', { detail: { userId: 123 } });
     window.dispatchEvent(event);
     ​
     // Микрофронтенд B
     window.addEventListener('userLoggedIn', (event) => {
       console.log('User ID:', event.detail.userId);
     });
     

     • CustomEvent создаёт новое событие с именем userLoggedIn и данными userId.
     • dispatchEvent отправляет событие, чтобы другие микрофронтенды могли его "услышать".
     • addEventListener позволяет другому микрофронтенду реагировать на событие.

2. Глобальное хранилище (например, Redux):

   • Что это: Централизованное хранилище для управления состоянием.
   • Как работает: Все микрофронтенды могут читать и изменять состояние через общие действия.
   • Пример:

     // Создание хранилища
     import { createStore } from 'redux';
     ​
     const initialState = { user: null };
     ​
     function reducer(state = initialState, action) {
       switch (action.type) {
         case 'SET_USER':
           return { ...state, user: action.payload };
         default:
           return state;
       }
     }
     ​
     const store = createStore(reducer);
     ​
     // Микрофронтенд A
     store.dispatch({ type: 'SET_USER', payload: { id: 123, name: 'John' } });
     ​
     // Микрофронтенд B
     store.subscribe(() => {
       console.log('Updated state:', store.getState());
     });
     

     • createStore создаёт хранилище с начальным состоянием.
     • reducer определяет, как состояние изменяется в ответ на действия.
     • dispatch отправляет действие для изменения состояния.
     • subscribe позволяет микрофронтенду реагировать на изменения состояния.

Навигация

1. URL-сегменты:

   • Что это: Использование URL для управления состоянием и навигацией.
   • Как работает: Каждый микрофронтенд может изменять URL, чтобы другие могли реагировать на изменения.
   • Пример:

     // Микрофронтенд A
     window.history.pushState({}, '', '/dashboard/user/123');
     ​
     // Микрофронтенд B
     window.addEventListener('popstate', () => {
       const path = window.location.pathname;
       console.log('Current path:', path);
     });
     

     • pushState изменяет URL без перезагрузки страницы.
     • popstate позволяет реагировать на изменения в истории браузера.

2. Общие роутеры:

   • Что это: Использование общего роутера для управления навигацией.
   • Как работает: Все микрофронтенды используют один роутер для синхронизации навигации.
   • Пример:

     // Общий роутер
     import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
     ​
     function App() {
       return (
         <Router>
           <Switch>
             <Route path="/dashboard" component={Dashboard} />
             <Route path="/profile" component={Profile} />
           </Switch>
         </Router>
       );
     }
     

     • Router управляет историей навигации.
     • Route определяет, какой компонент отображать для каждого пути.
     • Switch выбирает первый подходящий маршрут.

Принципы слабой связанности

• Независимость: Каждый микрофронтенд должен быть автономным и не зависеть от других.
• Чёткие интерфейсы: Определите чёткие контракты для взаимодействия между микрофронтендами.
• Минимизация общего состояния: Сведите к минимуму количество данных, которыми нужно делиться между микрофронтендами.

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