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 サイトの他の関連記事を参照してください。