React & RXJS 非标准答案

【问题标题】：React & RXJS non standardReact & RXJS 非标准
【发布时间】：2020-04-11 05:52:55
【问题描述】：

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

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

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

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

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

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

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

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

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

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

让我们假设它在observable.tsx 中声明了一个可观察对象，并在SubscribingCompoent.tsx 中订阅并在EmmitingComponent.tsx 中单击时补充水分。

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

【问题讨论】：

我的（诚然简短的）经验是，angular 和 react 在它们的模式和它们解决的用例上是相当正交的。在我参与的当前项目中，我们确实使用了redux、react-redux、rxjs 和redux-observable 的组合。 Redux 提供了处理异步分发的动作的平台，而 redux-observable 提供了一个史诗级的中间件来订阅分发的动作作为流。
实现是“乏善可陈的”，因为 Angular 非常固执己见，而 React 则不是。谷歌“react rxjs”，你会得到很多很多博客文章和文章，描述了一起使用 RxJS 和 React 的不同方式。找到一个解释您的特定用例的可能性不大，但核心概念与您通过谷歌搜索找到的类似。简而言之，您可以使用钩子或基于类的生命周期回调来设置和取消订阅，并将next 方法（或使用它的函数）作为道具传递给发射组件。
React 与 RxJS 配合得很好。在使用 React 和 Angular 之后，我首选的 FE 堆栈是 React、TypeScript、RxJS、typesafe-actions、redux-observable。
@wentjun 谢谢，但我在网上找不到好的代码示例。显然我使用 rxjs 的角度语法是错误的。您能否展示导入等如何适用于上述场景？

【解决方案1】：

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

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

【讨论】：