Die Problemstellung

Ich möchte einen gemeinsamen Datenstatus zwischen Vanilla Js und React App teilen.

Was ist in diesem POC

• Wir werden zwei ähnliche Counter-Apps in Vanilla erstellen und reagieren.
• Die Zählung sollte in einem gemeinsamen Zustand gespeichert werden
• Wenn wir die Anzahl in Vanilla aktualisieren, sollte sie sich in der Reaktion widerspiegeln und umgekehrt

Projektstruktur

Unser Projekt ist in zwei Hauptabschnitte unterteilt:

1. Stammverzeichnis: Enthält Kerndateien für den Vanilla-JavaScript-Teil der App.
2. react-mf-Verzeichnis: Enthält das React-Mikro-Frontend, das mit dem Vanilla-JavaScript-Teil interagiert.

Die Architektur der App kann hier unter dem Link überprüft werden

Schlüsseldateien und ihre Rollen

Stammverzeichnis

• index.html: Dies ist der Einstiegspunkt unserer App, der die HTML-Struktur einrichtet und Links zu Stylesheets und JavaScript-Dateien enthält. Es verfügt über zwei wichtige div-Elemente mit id="app" und id="root", die zum Mounten der Vanilla JS-App bzw. des React-Mikrofrontends verwendet werden.

• main.js: Fungiert als Haupt-JavaScript-Datei zum Initialisieren des Vanilla-JS-Teils der App. Es verwaltet die Kernlogik und interagiert mit dem gemeinsamen Status.

• counter.js: Enthält den Code, der für die Weiterleitung von Aktionen an den Redux-Store verantwortlich ist. Es löst beispielsweise eine INCREMENT-Aktion aus, um den Zähler zu aktualisieren.

• store.js: Richtet den Redux-Store ein, der den Status der Anwendung verwaltet und die Konsistenz zwischen den Vanilla JS- und React-Teilen der App gewährleistet.

React-MF-Verzeichnis

• App.jsx: Die Haupt-React-Komponente unseres Mikro-Frontends. Es nutzt den useState-Hook für die lokale Statusverwaltung und abonniert den Redux-Store, um den globalen Status widerzuspiegeln. Es stellt eine Schaltfläche zum Auslösen einer INCREMENT-Aktion dar und zeigt die aktuelle Anzahl aus dem Store an.

• main.jsx: Der Einstiegspunkt für das React-Mikro-Frontend, wo die React-App initialisiert und gerendert wird.

Den vollständigen Code finden Sie im GitHub-Repository.