React & RXJS non standard

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.

It's been my (admittedly short) experience that angular and react are fairly orthogonal in their patterns and the use cases they solve for. In a current project I'm involved with we do use a combination of `redux`, `react-redux`, `rxjs`, and `redux-observable`. Redux provides the platform of handling asynchronously dispatched actions, and redux-observable provides an epic middleware to subscribe to dispatched actions as streams. — Drew Reese, Apr 11 '20 at 06:40
The implementations are "lackluster" because Angular is extremely opinionated and React isn't. Google "react rxjs" and you will get many, many blog posts and write-ups describing different ways of using RxJS and React together. Finding one that explains your specific use case is unlikely, but the core concepts are similar to what you'll find by Googling. In a nutshell, you can use hooks or the class-based lifecycle callbacks to set up and tear down subscriptions, and pass the `next` method (or a function using it) as a prop to the emitting component. — backtick, Apr 11 '20 at 20:47
React works well with RxJS. After working with both React and Angular, my preferred FE stack is React, TypeScript, RxJS, typesafe-actions, redux-observable. — wentjun, Apr 12 '20 at 04:20
@wentjun thanks but I can't find good code examples online. and evidently my angular syuntax for using rxjs is wrong. could you show how imports and such would work for the senario above? — tatsu, Apr 13 '20 at 08:52

score 0 · Answer 1 · answered Jan 25 '21 at 12:28

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>
);

React & RXJS non standard

1 Answers1