React & RXJS 非标

Question

Online the implementations I see for RXJS with React are lackluster compared to what I'm used to with Angular.

All implementation examples that I've seen have the subscribe in the same file as the declaration. (some have the next in that same file too)

I'd like for a second here to abstract away from the notion of store and do something a little out of the box.

Here's a pattern that I use alot in Angular that I'd like to be able to reproduce in React:

One file contains a bunch of RXJS Subject declarations.

they are subscribed to in various components of the app.

and some other components or the same ones have the.next() on those Subjects.

How would I do that in React?

For simplicity's sake here's a three file layout:

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

And let's imagine it has one observable declared in the observable.tsx and subcribed to in the SubscribingCompoent.tsx and hydrated on click in the EmmitingComponent.tsx .

This is a use case for which there are no React docs online to be found.

Answer 1

Please refer to this answer . You can simply use the Async component and pass it your observables. If you do want to have a similar service approach, you can provide and assign the context to an instance of your service class as well as define the observables on the service itself.

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