使用 Redux 在 Vanilla 和 React 应用程序之间共享状态

WBOY
发布: 2024-08-14 20:31:14
原创
859 人浏览过

Sharing State Between Vanilla and React Apps with Redux

问题陈述

我想在 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!