Управление состоянием стало проще.

По мере разработки крупномасштабного приложения Micro Frontend, созданного с использованием федерации модулей Webpack, вам в конечном итоге потребуется обмениваться данными и обмениваться данными между вашими микроприложениями. Я расскажу о многих доступных вариантах в следующих статьях, но сначала я хочу поделиться с вами примером использования решения для управления состоянием.

Примечание. Совместное использование глобального состояния в архитектуре Micro Frontend должно быть последним средством и должно быть тщательно продумано, поскольку оно создает ненужную связь между вашими командами.

Zustand — это относительно новый инструмент управления состоянием, который все еще находится на ранней стадии своего жизненного цикла, и его загружают всего около 470 000 раз в неделю, но он быстро набирает обороты. Это элегантное и интересное решение, которое я настоятельно рекомендую вам попробовать.

Как мы могли бы создать магазин Zustand, который мы могли бы использовать в наших микро-приложениях?

Создание общего магазина Zustand

Во-первых, нам нужно создать магазин Zustand в одном из наших микроприложений. Это может быть любой, который предоставляет доступ к удаленным модулям с помощью Module Federation.

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

Обратите внимание, что мы создали хранилище, создав хук useStore. Это то, что мы покажем другим приложениям.

Далее мы обновляем наш webpack.config.js:

Теперь мы готовы использовать магазин в других наших микро-приложениях:

И вуаля! Вы создали глобальное состояние в архитектуре микроинтерфейса. Поздравляем!

Живой пример

Проверьте мое демонстрационное приложение Micro Frontend: https://micro-frontend-demo-main.vercel.app/

Это фиктивный сайт электронной коммерции для покупки различных видов фруктов. Он состоит из хост-приложения и двух пультов: корзины и продуктов. Пульт дистанционного управления корзиной предоставляет магазин Zustand для управления товарами в вашей корзине, а также для их добавления и удаления. Удаленный продукт потребляет его, поэтому он знает, какие товары были добавлены в корзину и сколько, что позволяет вам изменять количество или удалять/добавлять товары. В качестве бонуса магазин Zustand в этом случае сохраняет состояние корзины в локальном хранилище и гидратирует при загрузке страницы, чтобы мы могли сохранять вашу корзину между сеансами.

Вы можете ознакомиться с исходным кодом здесь: https://github.com/rautio/micro-frontend-demo

Если вам понравилась эта статья, подпишитесь на меня на Medium, чтобы узнать больше о микрофронтендах и Webpack Module Federation.