使用 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中文网其他相关文章！