Im trying to create a sample perhaps we switch to NGXS from angular redux + redux-observable.
We do have several usages which starts running based on an action and stop when something else happens running, which I'm not 100% sure how they should be handled. Small scenario:
on connect => listen to heroChanges
on disconnect => unsubscribe
#Action(HeroRealtimeActions.Connect)
heroChanged(ctx: StateContext<HeroRealtimeStateModel>) {
return this.hubClient.heroChanged$().pipe(
// tap(x => console.warn(">>>> hero changed", x)),
mergeMap(heroes => ctx.dispatch(new HeroActions.Update(hero))),
);
}
This is how i want it to work:
Connect completes and not block it e.g. returning Observable it will not complete (as above)
takeUntil on disconnect
cancel/ignore if connect is triggered again e.g. ala switchMap
The above works good however I dont want to block the Connect.
In redux-observable we use to have something as following:
action$ => action$.pipe(
ofType(HeroRealtimeActions.connectSuccess),
switchMap(hubConnection => this.hubClient.heroChanged$().pipe(
// do something...
takeUntil(action$.pipe(ofType(HeroRealtimeActions.disconnectSuccess))),
ignoreElements(),
))
);
Another option I was thinking is using manually .subscribe() use actions$ to takeUntil, but will need something else for switchMap - but it sounds it will get a bit messy
I can easily get something half baked working, I'm more asking for a correct way of doing it
So I believe the most equivalent and also quite clean is to use the ActionHandlers as described here https://www.ngxs.io/advanced/action-handlers. Changed the above as following:
actions$.pipe(
ofActionSuccessful(HeroRealtimeActions.Connect),
switchMap(() => this.hubClient.heroChanged$().pipe(
// tap(x => console.warn(">>>> hero changed", x)),
mergeMap(hero => store.dispatch(new HeroActions.Update(hero))),
takeUntil(actions$.pipe(ofActionSuccessful(HeroRealtimeActions.Disconnect))),
)),
).subscribe();
Related
Lets consider the following example:
// Subject sources have been created from Subjects
const one$ = scheduled([firstSubjectSource$, secondSubjectSource$], asyncScheduler)
.pipe(
mergeAll(),
share(),
);
const two$ = scheduled([thirdSubjectSource$, fourthSubjectSource$], asyncScheduler)
.pipe(
mergeAll(),
share(),
);
const final$ = scheduled([one$, two$], asyncScheduler)
.pipe(
combineLatestAll(),
map(() => { /* Some mapping */ }),
);
return final$;
The final$ is created, returned and can be subscribed to.
I have observed that the marble tests work perfectly, i.e, by the time the tests run all the observables have been setup and subscribed to correctly. But in the actual executing environment (iOS 15 JavascriptCore), this doesn't seem to be the case. Values are forwarded to the ...SubjectSource$ observables after subscription to final$, but final$ never emits anything. Tapping console logs in the one$, two$ shows that they also don't emit anything. My current hypothesis is that the internal subscription process hasn't finished. I have combed through some rxjs code but it doesn't look like the subscription process is async.
AFAIK, the asyncScheduler shouldn't make the internal subscription async. It should only affect how the input values are processed and forwarded.
If the return statement is changed to below, then everything works fine. However, putting an arbitrary wait time doesn't seem like the correct thing to do either.
setTimeout(() => cb(final$), 100);
Is the internal setup of observables one$, two$ and final$ async or sync?
Is there an event that I 'need to'/'can' wait on before returning final$ for use?
How do I make sure that the observables are actually ready for use before I return it?
I'm creating my source observable like this (make api call every 5s):
const obs$ = Observable.interval(5000).switchMap(() => makeApiCall());
And I want to modify $obs so that it has the following characteristics:
start the observable only when at there's at least 1 subscriber
multicast. I.e. if I obs$.subscribe(...) twice, the underlying code makeApiCall() should only run once.
any subscriber which subscribes at any time should have immediately the last emitted value (and not wait ~5s until the next value emits)
retryable. If one makeApiCall() errors, I want (if possible) all subscribers to get an error notification, but reconnect to $obs, and continue doing makeApiCall() every 5s
So far I found the following leads:
It seems like I'd need to create a BehaviorSubject myBehaviorSubject, do a single subscription obs$.subscribe(myBehaviorSubject), and any other observers should subscribe to myBehaviorSubject. Not sure if that answers the "retryable" part.
I also looked at shareReplay, seems like $obs.shareReplay(1) would do the trick (for the 4 requirements). If I understood correctly it subscribes a ReplaySubject(1) to the source observable, and future observers subscribe to this ReplaySubject. Is there an equivalent shareBehavior?
In RxSwift, I found shareReplayLatestWhileConnected, which seems like the shareBehavior I was imagining. But it doesn't exist in RxJS.
Any ideas what is the best way to achieve this?
As you mentioned, shareReplay(1) pretty much gets you there. It will multicast the response to current subscribers and replay the last value (if there is one) to new subscribers. That seems like what you would want rather than shareBehavior (if it existed) since you are calling an api and there isn't an initial value.
You should know that shareReplay will create a subscription to the source stream but will only unsubscribe when refCount === 0 AND the source stream terminates (error or complete). This means that after the first subscription that the interval will start and even when there are no more subscriptions it will continue.
If you want to stop the interval when no-one is subscribed then use multicast(new ReplaySubject(1)).refCount(). The multicast operator will create a single subscription to the source stream and push all values into the subject provided as an instance (multicast(new Subject())) or by the factory (multicast(() => new Subject())). All subscribers to the stream after the multicast will subscribe to the multicast subject. So when a value flows through the multicast operator all of its subscribers will get that value. You can change the type of subject that you pass to multicast to change its behavior. In your case you probably want a ReplaySubject so that it will replay the last value to a new subscriber. You could use a BehaviorSubject too if you felt that met your need.
Now the multicast operator is connectable meaning that you would have to call connect() on the stream to make it hot. The refCount operator basically makes a connectable observable act like an ordinary observable in that it will become hot when subscribed but will become cold when there are no subscribers. It does this be keeping an internal reference count (hence the name refCount). When refCount === 0 it will disconnect.
This is the same thing as shareReplay(1) with one minor but important difference which is that when there are no more subscribers that it will unsubscribe from the source stream. If you are using a factory method to create a new subject when subscribing to the source (ex: multicast(() => new ReplaySubject(1))) then you will lose your value when the stream goes from hot to cold to hot since it will create a new subject each time it goes hot. If you want to keep the same subject between source subscriptions then you can pass in a subject instead of a factory (ex: multicast(new ReplaySubject(1)) or use its alias publishReplay(1).
As far as your last requirement of providing errors to your subscribers and then resubscribing, you can't call the error callback on a subscription and then continue getting values on the next callback. An unhandled error will end a subscription if it reaches it. So you have to catch it before it gets there and turn it into a normal message if you want your subscription to see it and still live. You can do this like so: catch((err) => of(err)) and just flag it somehow. If you want to mute it then return empty().
If you want to retry immediately then you could use the retryWhen operator but you probably want to put that before the sharing operator to make it universal. However this also prevents your subscribers from knowing about an error. Since the root of your stream is an interval and the error came from the inner observable returned from the switchMap, the error will not kill the source of the stream but it could kill the subscription. So as long as you handle the error (catch/catchError) the api call will be retried on the next interval.
Also, you may want timer(0, 5000) instead of interval so that your api call immediately fires and then fires on a 5 second interval after that.
So I would suggest something like the following:
let count = 0;
function makeApiCall() {
return Rx.Observable.of(count++).delay(1000);
}
const obs$ = Rx.Observable.timer(0, 5000)
.switchMap(() => makeApiCall().catch(() => Rx.Observable.empty()))
.publishReplay(1)
.refCount();
console.log('1 subscribe');
let firstSub = obs$.subscribe((x) => { console.log('1', x); });
let secondSub;
let thirdSub;
setTimeout(() => {
console.log('2 subscribe');
secondSub = obs$.subscribe((x) => { console.log('2', x); });
}, 7500);
setTimeout(() => {
console.log('1 unsubscribe');
firstSub.unsubscribe();
console.log('2 unsubscribe');
secondSub.unsubscribe();
}, 12000);
setTimeout(() => {
console.log('3 subscribe');
thirdSub = obs$.subscribe((x) => { console.log('3', x); });
}, 17000);
setTimeout(() => {
console.log('3 unsubscribe');
thirdSub.unsubscribe();
}, 30000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.10/Rx.min.js"></script>
For convenience, here are aliases for multicast:
publish() === multicast(new Subject())
publishReplay(#) === multicast(new ReplaySubject(#))
publishBehavior(value) === multicast(new BehaviorSubject(value))
I just tried to implement this with rxjs 6, but the implementation feels kinda hacky. I think there should be a much cleaner way to achieve this.
The expected behavior is:
As long as there are observers, they all get the same values.
When there are 0 observers, the source subscription is closed but the ReplaySubject is not completed.
When new observers subscribe again they get the last N values and a new subscription to source is established.
When the source completes or throws an error, current observers are completed resp. notified.
After source completion or source error, new subscribers don't get replayed values any more and are completed immediately.
export function shareReplayLatestWhileConnected<T>(count?: number) {
return function (source: Observable<T>): Observable<T> {
let done = false;
return source.pipe(
// Identify when source is completed or throws an error.
tap(
null,
() => (done = true),
() => (done = true),
),
multicast(
// Subject for multicasting
new ReplaySubject<T>(count),
// Selector function. Stop subscription on subject, when source is done, to kill all subscriptions.
(shared) => shared.pipe(takeWhile(() => !done)),
),
// I was not able to get rid of duplicate subscriptions. Multicast subscribed multiple times on the source.
share(),
);
};
}
Any tips on how I could improve this solution are very appreciated.
Use it like this:
const shared$ = source$.pipe(shareReplayLatestWhileConnected(1));
I know this is basic rx stuff, but I'm a little confused on when things decide to fire. Take the following:
Observable.of([1,2,3,4,5])
.combineLatest([6,7,8,9,10])
.take(1)
.do(([first, second]) => console.log(first, second))
// ...Logs nothing...
Why doesn't that do anything until you subscribe to it? No logs are fired until I add a subscribe call to the end of the chain:
Observable.of([1,2,3,4,5])
.combineLatest([6,7,8,9,10])
.take(1)
.do(([first, second]) => console.log(first, second))
.subscribe(() => console.log('Subscribed'));
// Logs:
// "5, 6"
// "Subscribed"
Also, if I understand correctly, I don't need to unsubscribe since take(1) takes care of that for me, correct?
Your example generates a cold observable - one which doesn't generate until you subscribe. The alternative is a hot observable which is generating regardless of observers and is shared between observers. see hot and cold observables
You can check whether your sequence is terminated by supplying the onCompleted callback (third parameter in subscribe). Like so:
rx.Observable.from([1,2,3,4,5])
.combineLatest(rx.Observable.from([6,7,8,9,10]))
.take(1)
.do(([first, second]) => console.log(first, second))
.subscribe(() => console.log('Subscribed'), err=> { console.error(err)}, () => console.log('completed!!'));
Here is what I'm doing now to convert an Observable to a ReplaySubject:
const subject = new Rx.ReplaySubject(1);
observable.subscribe(e => subject.next(e));
Is this the best way to make the conversion, or is there a more idiomatic way?
You can use just observable.subscribe(subject) if you want to pass all 3 types of notifications because a Subject already behaves like an observer. For example:
let subject = new ReplaySubject();
subject.subscribe(
val => console.log(val),
undefined,
() => console.log('completed')
);
Observable
.interval(500)
.take(5)
.subscribe(subject);
setTimeout(() => {
subject.next('Hello');
}, 1000)
See live demo: https://jsbin.com/bayewo/2/edit?js,console
However this has one important consequence. Since you've already subscribed to the source Observable you turned it from "cold" to "hot" (maybe it doesn't matter in your use-case).
It depends what do you mean by 'convert'.
If you need to make your observable shared and replay the values, use observable.pipe(shareReplay(1)).
If you want to have the subscriber functionality as well, you need to use the ReplaySubject subscribed to the original Observable observable.subscribe(subject);.
Like the first answer, as subject is also an observer.
const subject = new Rx.ReplaySubject(1);
observable.subscribe(subject);
I am facing a RxJS issue.
My app is currently designed as follows: I have two different clients: ClientA & ClientB that subscribe to two different Observables: ObservableA & ObservableB.
Note that the app also mutates a variable called aVariable.
Here is the flow:
ClientA subscribes to ObservableA.
ClientB subscribes to ObservableB.
ObservableB subscription read false from aVariable and completes.
ObservableA subscription sets aVariable to true and completes (later than ObservableB).
Whereas what is really intended was for ObservableA's subscription to complete before ObservableB's so that ClientB would read true from aVariable... Or to put it another way, somehow ensure that ObservableB's subscription waits till the other subscription has completed.
I am not sure what RxJS construct to use in order to achieve what I want (I currently use plain Observables). I believe I need more than plain Observables here...
Can someone please help?
P.S. Note that aVariable is held in a ngrx store but I don't think that is relevant to this issue...
P.P.S. The above is a simplification of my real app.
I think you can solve your problem with a intermediate Subject in which you emit a value when streamB gets subscribed to:
const completeStreamA = new Rx.Subject();
const streamA = Rx.Observable.never()
.takeUntil(completeStreamA);
const streamB = Rx.Observable.of('aValueOnStreamB')
.do(() => completeStreamA.next('complete stream A'));
//clientA subscribes immediately
streamA.subscribe(
next => console.log('a->next->'+next),
err => console.log('a->error->' + err.message),
() => console.log('a->complete')
);
setTimeout(() => {
//simulate later subscription by clientB
streamB.subscribe(
next => console.log('b->next->'+next),
err => console.log('b->error->' + err.message),
() => console.log('b->complete')
);
}, 3 * 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script>
Only after the streamB gets subscribed to it will next a value into the completeStreamA subject which will complete streamA. The output of above code:
a->complete
b->next->aValueOnStreamB
b->complete