如何在两个以上的 React 应用程序之间共享数据?

iam*_*bka 4 javascript frontend reactjs redux react-redux

我需要为多个应用程序共享一些数据,某些数据是安全的,有些则不安全。它需要避免来自应用程序的多个相同请求。我考虑过 IndexedDb、localStorage,但在某些处于隐身模式的浏览器中它不起作用。也许最后一种方式是创建父应用程序,父应用程序将提供 api 接口,执行相同的请求并通过全局对象向子组件提供状态,子组件可以根据需要通过全局 api 调用请求,但这很奇怪,任何人都可以改变它的对象。有人知道如何解决这个问题吗?任何想法都会对我有好处!谢谢你的建议!

Mat*_*Yao 5

也许您可以研究微前端基础设施。“微前端”一词于 2016 年底首次出现在 ThoughtWorks 技术雷达中。它将微服务的概念延伸到了前端世界。

基本上,您可以从保存全局状态或数据(例如路由、会话、身份验证令牌等)的“shell”应用程序开始。

在这一层之下,您可以选择任何您想要用来构建独立 SPA 的前端框架,它们可以通过由自定义 JavaScript 事件组成的事件总线轻松共享全局数据。

例如,您可以在 shell 中创建一个事件“print_report”:

window.dispatchEvent(new Event("print_report") );
Run Code Online (Sandbox Code Playgroud)

并在子级应用程序中执行:

window.addEventListener("print_report", () => { call_back(data); });
Run Code Online (Sandbox Code Playgroud)

最后,每个前端模块:

  • 是独立的
  • 可独立开发
  • 可以独立测试
  • 可独立部署
  • 与技术/框架无关
  • 可以通过全局事件总线相互通信。

有关上述内容的更多信息,请阅读: