RxJS 5, converting an observable to a BehaviorSubject(?)

rxjs rxjs5
Karptonite picture Karptonite · Sep 14, 2017 · Viewed 8k times · Source

I have a parent observable that, once it has a subscriber, will do a lookup and emit a single value, then complete.

I'd like to convert that into an observable (or behavior subject or whatever works) that does the following: once it has at least one subscriber, it gets the result from the parent observable (once). Then it emits that value to all of its subscribers, and also emits that single value to all future subscribers, when they subscribe. It should continue with this behavior even if its subscriber count drops to zero.

It seems like this should be easy. Here is what didn't work:

theValue$: Observable<boolean> = parent$
.take(1)
.share()

Other things that didn't work: publishReplay(), publish(). Something that worked better:

theValue$ = new BehaviorSubject<boolean>(false);

parent$
.take(1)
.subscribe( value => theValue$.next(value));

There is a problem with this approach, though: parent$ is subscribed to before theValue$ gets its first subscriber.

Is there a better way to handle this?

Answer

cartant picture cartant · Sep 14, 2017

shareReplay should do what you want:

import 'rxjs/add/operator/shareReplay';
...
theValue$: Observable<boolean> = parent$.shareReplay(1);

shareReplay was added in RxJS version 5.4.0. It returns a reference counted observable that will subscribe to the source - parent$ - upon the first subscription being made. And subscriptions that are made after the source completes will receive replayed notifications.

shareReplay - and refCount in general - is explained in more detail in an article I wrote recently: RxJS: How to Use refCount.

Related questions

How to return value from function which has Observable subscription inside?

I dont know how to extract value from Observable to be returned by function in which Observable is present. I need just a value from it to be returned, nothing else. Current version which works function getValueFromObservable() { this.store.subscribe( (…

Read More
Chaining Observables in RxJS

I'm learning RxJS and Angular 2. Let's say I have a promise chain with multiple async function calls which depend on the previous one's result which looks like: var promiseChain = new Promise((resolve, reject) => { setTimeout(() => { resolve(1); }, 1000); }).then((result) => { …

Read More
What is the correct way to share the result of an Angular Http network call in RxJs 5?

By using Http, we call a method that does a network call and returns an http observable: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } If we take this observable and add multiple subscribers to it: …

Read More