时间戳

首页 > 解决方案 > React & RXJS 非标准

reactjs - React & RXJS 非标准

问题描述

与我习惯使用 Angular 相比，我在网上看到的使用 React 的 RXJS 实现乏善可陈。

我见过的所有实现示例都将订阅与声明放在同一个文件中。（有些在同一个文件中也有下一个）

我想在这里抽出一点，从存储的概念中抽象出来，做一些开箱即用的事情。

这是我在 Angular 中经常使用的一种模式，我希望能够在 React 中重现：

一个文件包含一堆 RXJS 主题声明。

它们在应用程序的各个组件中被订阅。

并且一些其他组件或相同的组件在这些主题上有 .next() 。

我将如何在 React 中做到这一点？

为简单起见，这里有一个三文件布局：

src
 ├app
 │  └components
 │     ├EmmitingComponent.tsx
 │     └SubscribingCompoent.tsx
 └services
    └observables.tsx

让我们想象一下，它在 中声明了一个 observableobservable.tsx并在 中订阅，SubscribingCompoent.tsx并在单击EmmitingComponent.tsx.

这是一个在网上找不到 React 文档的用例。

标签： reactjsrxjs

解决方案

请参考这个答案。您可以简单地使用该Async组件并将其传递给您的 observables。如果您确实想要使用类似的服务方法，您可以提供上下文并将其分配给服务类的实例，并在服务本身上定义可观察对象。

return (
    <Async select={[names$]}>
        {result => <div>{result}</div>}
    </Async>
);

推荐阅读