使用 Redux 在 Vanilla 和 React 應用程式之間共用狀態

問題陳述

我想在 vanilla js 和 React 應用程式之間共享通用的資料狀態。

這個 POC 包含什麼內容

• 我們將在 vanilla 和 React 中建立兩個類似的計數器應用程式。
• 計數應該以通用狀態儲存
• 如果我們更新香草的計數，它應該反映在反應中，反之亦然

專案結構

我們的專案分為兩個主要部分：

1. 根目錄：包含應用程式的普通 JavaScript 部分的核心檔案。
2. react-mf 目錄：容納與普通 JavaScript 部分互動的 React 微前端。

應用程式的架構可以在此處的連結查看

關鍵文件及其作用

根目錄

• index.html：這是我們應用程式的入口點，設定 HTML 結構並包含指向樣式表和 JavaScript 檔案的連結。它具有兩個關鍵的 div 元素，id="app" 和 id="root"，分別用於安裝普通 JS 應用程式和 React 微前端。

• main.js：充當主 JavaScript 文件，用於初始化應用程式的普通 JS 部分。它處理核心邏輯並與共享狀態互動。

• counter.js：包含負責將作業分派到 Redux 儲存的程式碼。例如，它調度 INCREMENT 操作來更新計數器。

• store.js：設定 Redux 存儲，它管理應用程式的狀態並確保應用程式的 vanilla JS 和 React 部分之間的一致性。

React-MF 目錄

• App.jsx：我們微前端的主要 React 元件。它利用 useState 鉤子進行本地狀態管理，並訂閱 Redux 儲存體來反映全域狀態。它呈現一個按鈕來調度 INCREMENT 操作並顯示儲存中的目前計數。

• main.jsx：React 微前端的入口點，React 應用程式在此處初始化和渲染。

您可以在 GitHub 儲存庫中找到完整程式碼。

以上是使用 Redux 在 Vanilla 和 React 應用程式之間共用狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！