I'm currently using redux-observable for effects. It fits nice into whole redux flow (the question is if I need Redux itself, but that's a separate matter)
Sometimes I use RxJS directly in an effect hook (surely, with teardown!), but there are RxJS hook libraries for that, e.g.: re-rxjs/react-rxjs, crimx/observable-hooks and LeetCode-OpenSource/rxjs-hooks (they have thousands of weekly downloads! Alas, I haven't tried them well yet)
And I made a tiny React + RxJS package to display Observable content:
P.S. I also created an ⚠️ experimental JSX + RxJS framework — it's cute, check it out!
And what RxJS + React addons do you use?
How do you like them? Share an example!
Do you think we even need RxJS in React?
Top comments (3)
If I wanted to return an array of JSX, is there a better way than:
Hey, Jesse!
Great question, a lot happening here :)
First, about observables inside render fn:
useMemo
is fine, but it does not guarantee that the content will be preserved. Consider either using some useConst analogue, or moving Observables outside the render function.Also, check out this experimental update to the
<$>
library:The component function is executed only once, thus making it safe to create Observables here. This is a beta feature and I'm currently testing it. It's available in the
@next
npm version and can be trialled online More details at github/react-rxjs-elements/pull/9Second, the double mapping
The
services$.pipe( map(items => items.map( …
thing always bothered me. There are also several solutions to it.1: Use a separate component to render the list
2: Use
rxjs-proxify
to do the array.map in a more concise way:Proxify provides magic like
proxify( of(42) ).toString()
which returns anObservable<string>
. So.map(…)
in the example above creates another Observable, by calling.pipe(map( items => items.map(…) ))
on the underlying Observable. More on the rxjs-proxify here-
And just a side note: use
ajax
from rxjs/ajax to remove the-
If that doesn't suit your needs — be sure to checkout other libs I mention, they are all pretty amazing.
Cheers 🙂
Some honorable mentions:
github.com/fanduel-oss/refract
Cool "implement it from scratch" tutorial on using React with RxJS
Using React and RxJS together
Osman Cea ・ Jun 3 ・ 8 min read