Redux を使用した Vanilla アプリと React アプリの間で状態を共有する

問題文

バニラ 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 リポジトリで見つけることができます。

以上がRedux を使用した Vanilla アプリと React アプリの間で状態を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。