Replies: 2 comments
-
@cartant I read a blog post of yours from 2017 titled "RxJS: Understanding the publish and share Operators" after it was suggested that I use the const source = new Subject<Observable<string>>();
const eventBus = source.pipe(concatAll(), share()); However, I'm still failing to grasp why |
Beta Was this translation helpful? Give feedback.
-
Hi @brennarvo! import {concatMap, Observable, Subject, tap} from "rxjs";
const source = new Subject<[Observable<string>, string]>();
const publish = (event) => {
source.next(
[new Observable((subscriber) => {
subscriber.next(event);
subscriber.complete();
}), event]
);
};
// Calendar Widget
source
.pipe(
tap(([, val]) => console.log('Cleaner widget ', val)),
concatMap(([obs]) => obs)
).subscribe({
next: (event) => {
if (event === 'LOGIN') {
console.log('📅 Calendar initializing...');
publish('CALENDAR_HAS_BIRTHDAYS');
}
},
});
// Chat Widget
source
.pipe(
tap(([, val]) => console.log('Chat widget ', val)),
concatMap(([obs]) => obs)
).subscribe({
next: (event) => {
if (event === 'LOGIN') {
console.log('💬 Chat initializing...🔄');
}
if (event === 'CALENDAR_HAS_BIRTHDAYS') {
console.log('💬 Chat opening birthday prompt');
}
},
});
// LOGIN event
publish('LOGIN'); In the logs you'll see:
This shows that the observable getting pushed into the conact first for the Chat widget is the event
The fact that share fixes your case is pretty much considering that only one subscription is made to the observable having concatAll and here the order is as it was run, and values are pushed as such. I hope this explanation made sense to some extent. |
Beta Was this translation helpful? Give feedback.
-
Hello! I am trying to understand how the
concatAll()
operator works.From how I interpreted the documentation,
concatAll()
will not subscribe to the next observable emitted to the source until the previous observable emitted to the source has completed. However, while putting together a local demonstration to test my understanding of this operator, I found this to not be the case.My demonstration features two widgets: a calendar widget and a chat widget.
First, the "application" starts by publishing a
LOGIN
event to tell the widgets to initialize. Next, the calendar widget processes theLOGIN
event and publishes aCALENDAR_HAS_BIRTHDAYS
event.However, at this point, I was expecting
concatAll()
piped onto thesource
to prevent theCALENDAR_HAS_BIRTHDAYS
from from reaching the Chat Widget. I figured that since theObservable
associated with theLOGIN
event has not completed,concatAll()
would wait to emit theCALENDAR_HAS_BIRTHDAYS
event to subscribers until it was complete.Here is the actual code, and a link to the associated Stackblitz:
If you check your logs you'll see the following:
However, what I was expecting was this:
I'm a little bit lost and unsure where my understanding of
concatAll()
is falling apart.Here is how I am interpreting the execution of the code above:
publish
is called with theLOGIN
eventObservable
is added to thesource
which will emitLOGIN
when subscribed toconcatAll()
checks to see if there are any incompleteObservable
values emitted tosource
source
,concatAll()
subscribes to the observable in step 2concatAll()
"pulls" the emitted value out of the inner observable, i.e.,LOGIN
concatAll()
emits theLOGIN
event to subscribers ofeventBus
LOGIN
eventpublish
with aCALENDAR_HAS_BIRTHDAYS
eventObservable
is added tosource
which will emitCALENDAR_HAS_BIRTHDAYS
when subscribed toconcatAll()
checks to see if there are any incompleteObservable
values emitted to_eventBus
However, I was expecting step 12 to be the following:
concatAll()
does not subscribe to the observableBut in fact, this is not the case.
concatAll()
does seem to be emitting theCALENDAR_HAS_BIRTHDAYS
event to subscribers, hence the "💬 Chat opening birthday prompt" log.Could somebody help me understand where I'm misinterpreting this operator, and why my demonstration code isn't working as expected?
Beta Was this translation helpful? Give feedback.
All reactions