如何使用 RxJs 在 single-spa 中共享 UI 状态？

Question

根据 single-spa 官方文档，我们可以使用 RxJs 共享应用程序的 UI 状态。

Observables / Subjects (RxJs) - 一个微前端向一个流发出新值，该流可以被任何其他微前端使用。它从其浏览器模块中将 observable 导出到所有微前端，以便其他人可以导入它。

链接：https : //single-spa.js.org/docs/recommended-setup/#ui-state

链接：https : //single-spa.js.org/docs/faq/#how-can-i-share-application-state-between-applications

我试图在 React 中创建一个示例，其中我使用 single-spa 包裹将我的微应用程序包含在根应用程序中。我试图使用 RxJs 共享 UI 状态。当我在 google 上搜索 single-spa RxJs 时，我什么也没找到。谁能为我提供一个基本示例，我将能够为以下用例共享 UI 状态：

• 将 UI 状态从根应用程序共享到我的微应用程序。
• 将 UI 状态从微应用共享到根应用。
• 在微应用之间共享 UI 状态。

Answer 1

以下是有关如何解决此问题的高级概述：

• 在导入映射中添加 rxjs 作为共享依赖项

    "rxjs": 'https://unpkg.com/@esm-bundle/rxjs/system/rxjs.min.js,
    "rxjs/operators": 'https://unpkg.com/@esm-bundle/rxjs/system/rxjs-operators.min.js,
  

  • 考虑将这些固定到特定版本！

• 创建一个实用程序模块（create-single-spa使这变得容易！）它设置和导出带有您需要的数据的可观察对象

• 在 importmap 中也包含这个实用程序模块

• 从需要它的应用程序中的实用程序模块导入和订阅 observable

  • 不要忘记在卸载应用程序时取消订阅。

• 庆祝

我创建了single-spa-example-rxjs-shared-state作为示例 repo，它展示了如何使用具有跨前端导入的 Rxjs实用程序模块。