A declaração do problema

Quero compartilhar um estado de dados comum entre vanilla js e react app.

O que há neste POC

• Criaremos dois aplicativos de contador semelhantes no vanilla e reagiremos.
• A contagem deve ser armazenada em um estado comum
• Se atualizarmos a contagem no vanilla, ela deverá ser refletida no react e vice-versa

Estrutura do Projeto

Nosso projeto está dividido em duas seções principais:

1. Diretório raiz: Contém arquivos principais para a parte Vanilla JavaScript do aplicativo.
2. Diretório react-mf: Abriga o micro-frontend React que interage com a parte Vanilla JavaScript.

A arquitetura do app pode ser conferida no link aqui

Arquivos principais e suas funções

Diretório raiz

• index.html: Este é o ponto de entrada do nosso aplicativo, configurando a estrutura HTML e incluindo links para folhas de estilo e arquivos JavaScript. Ele apresenta dois elementos div principais com id="app" e id="root", que são usados ​​para montar o aplicativo JS vanilla e o micro-frontend React, respectivamente.

• main.js: atua como o arquivo JavaScript principal para inicializar a parte Vanilla JS do aplicativo. Ele lida com a lógica central e interage com o estado compartilhado.

• counter.js: Contém o código responsável por despachar as ações para a loja Redux. Por exemplo, ele despacha uma ação INCREMENT para atualizar o contador.

• store.js: Configura a loja Redux, que gerencia o estado do aplicativo e garante a consistência entre as partes vanilla JS e React do aplicativo.

Diretório react-mf

• App.jsx: O principal componente React do nosso micro-frontend. Ele utiliza o gancho useState para gerenciamento de estado local e assina o armazenamento Redux para refletir o estado global. Ele renderiza um botão para despachar uma ação INCREMENT e exibe a contagem atual da loja.

• main.jsx: O ponto de entrada para o micro-frontend React, onde o aplicativo React é inicializado e renderizado.

Você pode encontrar o código completo no repositório GitHub.