El enunciado del problema

Quiero compartir un estado de datos común entre vanilla js y la aplicación React.

¿Qué hay en este POC?

• Crearemos dos aplicaciones de contador similares en vainilla y reaccionaremos.
• El recuento debe almacenarse en un estado común
• Si actualizamos el recuento en vanilla, debería reflejarse en reaccionar y viceversa

Estructura del proyecto

Nuestro proyecto se divide en dos secciones principales:

1. Directorio raíz: contiene archivos principales para la parte básica de JavaScript de la aplicación.
2. Directorio reaccionar-mf: Alberga la microfrontend de React que interactúa con la parte básica de JavaScript.

La arquitectura de la aplicación se puede consultar en el enlace aquí

Archivos clave y sus funciones

Directorio raíz

• index.html: Este es el punto de entrada de nuestra aplicación, configura la estructura HTML e incluye enlaces a hojas de estilo y archivos JavaScript. Cuenta con dos elementos div clave con id="app" e id="root", que se utilizan para montar la aplicación Vanilla JS y la microfrontend React, respectivamente.

• main.js: actúa como el archivo JavaScript principal para inicializar la parte Vanilla JS de la aplicación. Maneja la lógica central e interactúa con el estado compartido.

• counter.js: Contiene el código responsable de enviar acciones a la tienda Redux. Por ejemplo, envía una acción INCREMENT para actualizar el contador.

• store.js: configura la tienda Redux, que administra el estado de la aplicación y garantiza la coherencia entre las partes Vanilla JS y React de la aplicación.

Directorio reaccionar-mf

• App.jsx: El componente principal de React de nuestra micro-frontend. Utiliza el gancho useState para la gestión del estado local y se suscribe a la tienda Redux para reflejar el estado global. Muestra un botón para enviar una acción INCREMENTAR y muestra el recuento actual de la tienda.

• main.jsx: el punto de entrada para la microfrontend de React, donde se inicializa y representa la aplicación React.

Puedes encontrar el código completo en el repositorio de GitHub.