React & RXJS 非標

Question

在網上，我看到的 RXJS 和 React 的實現與我習慣的 Angular 相比顯得乏善可陳。

我見過的所有實現示例都將訂閱與聲明放在同一個文件中。 （有些在同一個文件中也有下一個）

我想在這里抽出一點，從存儲的概念中抽象出來，做一些開箱即用的事情。

這是我在 Angular 中經常使用的模式，我希望能夠在 React 中重現：

一個文件包含一堆 RXJS 主題聲明。

它們在應用程序的各個組件中被訂閱。

並且一些其他組件或相同的組件在這些主題上有 .next() 。

我將如何在 React 中做到這一點？

為簡單起見，這里有一個三文件布局：

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

讓我們想象一下，它在 observable.tsx 中聲明了一個observable.tsx ，並在 SubscribingCompoent.tsx 中SubscribingCompoent.tsx並在EmmitingComponent.tsx中單擊時水合。

這是一個在網上找不到 React 文檔的用例。

Answer 1

請參考這個答案。 您可以簡單地使用Async組件並將其傳遞給您的 observables。 如果您確實想要使用類似的服務方法，您可以提供上下文並將其分配給您的服務實例 class 以及在服務本身上定義可觀察對象。

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