L'énoncé du problème

Je souhaite partager un état de données commun entre vanilla js et l'application React.

Qu'y a-t-il dans ce POC

• Nous allons créer deux applications de compteur similaires dans Vanilla et réagir.
• Le décompte doit être stocké dans un état commun
• Si nous mettons à jour le décompte dans Vanilla, cela devrait être reflété dans React et vice-verse

Structure du projet

Notre projet est divisé en deux sections principales :

1. Répertoire racine : contient les fichiers principaux de la partie JavaScript Vanilla de l'application.
2. Répertoire React-mf : héberge la micro-interface React qui interagit avec la partie JavaScript Vanilla.

L'architecture de l'application peut être vérifiée sur le lien ici

Fichiers clés et leurs rôles

Répertoire racine

• index.html : Il s'agit du point d'entrée de notre application, définissant la structure HTML et incluant des liens vers des feuilles de style et des fichiers JavaScript. Il comporte deux éléments div clés avec id="app" et id="root", qui sont utilisés respectivement pour monter l'application Vanilla JS et le micro-frontend React.

• main.js : agit comme le fichier JavaScript principal pour initialiser la partie Vanilla JS de l'application. Il gère la logique de base et interagit avec l'état partagé.

• counter.js : contient le code responsable de la répartition des actions vers le magasin Redux. Par exemple, il envoie une action INCREMENT pour mettre à jour le compteur.

• store.js : configure le magasin Redux, qui gère l'état de l'application et assure la cohérence entre les parties Vanilla JS et React de l'application.

Répertoire réagir-mf

• App.jsx : Le composant React principal de notre micro-frontend. Il utilise le hook useState pour la gestion de l'état local et s'abonne au magasin Redux pour refléter l'état global. Il affiche un bouton pour envoyer une action INCREMENT et affiche le nombre actuel du magasin.

• main.jsx : le point d'entrée de la micro-interface React, où l'application React est initialisée et rendue.

Vous pouvez trouver le code complet dans le référentiel GitHub.