問題文

バニラ JS と React アプリの間で共通のデータ状態を共有したいです。

この POC の内容

• バニラで 2 つの同様のカウンター アプリを作成し、反応します。
• カウントは共通の状態で保存される必要があります
• バニラでカウントを更新すると、それが反応に反映され、その逆も反映されるはずです

プロジェクトの構造

私たちのプロジェクトは 2 つの主要なセクションに分かれています:

1. ルート ディレクトリ: アプリのバニラ JavaScript 部分のコア ファイルが含まれています。
2. react-mf ディレクトリ: バニラ JavaScript 部分と対話する React マイクロフロントエンドを格納します。

アプリのアーキテクチャはここのリンクで確認できます

主要なファイルとその役割

ルートディレクトリ

• index.html: これはアプリのエントリ ポイントであり、HTML 構造を設定し、スタイルシートと JavaScript ファイルへのリンクを含みます。これには、id="app" と id="root" を持つ 2 つの主要な div 要素があり、それぞれバニラ JS アプリと React マイクロフロントエンドをマウントするために使用されます。

• main.js: アプリのバニラ JS 部分を初期化するためのメイン JavaScript ファイルとして機能します。コア ロジックを処理し、共有状態と対話します。

• counter.js: Redux ストアにアクションをディスパッチするコードが含まれています。たとえば、カウンターを更新するために INCREMENT アクションをディスパッチします。

• store.js: Redux ストアをセットアップします。これは、アプリケーションの状態を管理し、アプリのバニラ JS 部分と React 部分の間の一貫性を確保します。

反応-mf ディレクトリ

• App.jsx: マイクロフロントエンドの主要な React コンポーネント。 useState フックを使用してローカル状態を管理し、Redux ストアをサブスクライブしてグローバル状態を反映します。 INCREMENT アクションを送出するボタンをレンダリングし、ストアからの現在のカウントを表示します。

• main.jsx: React アプリが初期化およびレンダリングされる React マイクロフロントエンドのエントリ ポイント。

完全なコードは GitHub リポジトリで見つけることができます。