Постановка проблемы

Я хочу поделиться общим состоянием данных между vanilla js и приложением React.

Что в этом POC

• Мы создадим два похожих приложения-счетчика в vanilla и отреагируем.
• Счетчик должен храниться в общем состоянии
• Если мы обновим счетчик в vanilla, это должно отразиться в реакции и наоборот

Структура проекта

Наш проект разделен на два основных раздела:

1. Корневой каталог: содержит основные файлы для базовой части приложения, написанной на JavaScript.
2. Каталог React-mf: содержит микроинтерфейс React, который взаимодействует с базовой частью JavaScript.

Архитектуру приложения можно проверить по ссылке здесь

Ключевые файлы и их роли

Корневой каталог

• index.html: это точка входа в наше приложение, настраивающая структуру HTML и включающая ссылки на таблицы стилей и файлы JavaScript. Он содержит два ключевых элемента div с id="app" и id="root", которые используются для монтирования стандартного приложения JS и микроинтерфейса React соответственно.

• main.js: действует как основной файл JavaScript для инициализации стандартной JS-части приложения. Он обрабатывает основную логику и взаимодействует с общим состоянием.

• counter.js: содержит код, отвечающий за отправку действий в хранилище Redux. Например, он отправляет действие INCREMENT для обновления счетчика.

• store.js: настраивает хранилище Redux, которое управляет состоянием приложения и обеспечивает согласованность между частями ванильного JS и React приложения.

Каталог реакции-mf

• App.jsx: основной компонент React нашего микро-интерфейса. Он использует хук useState для локального управления состоянием и подписывается на хранилище Redux для отражения глобального состояния. Он отображает кнопку для отправки действия INCREMENT и отображает текущий счетчик из хранилища.

• main.jsx: точка входа для микроинтерфейса React, где приложение React инициализируется и отображается.

Полный код можно найти в репозитории GitHub.