Why is a Promise changing behavior of getValue in RXJS? - rxjs

Question

I had an issue where adding an extra pipe to subscription to a BehaviorSubject was making the wrong behavior in some tests. Whenever I did const stores = await lastValueFrom(workingStore$); in RXJS 7 or const stores = await workingStore$.toPromise(); in RXJS 6, the value was not what I expected. I reduced the code down to this fiddle: https://jsfiddle.net/Dave_Stein/v7aj6bwy/
You can see on the run without a concatMap, getValue gives 3 values in an array. With concatMap, it will only return the first value.
The same can be observed when I use toPromise in this way:
console.log('here i am', bug);
const promise = workingStore$.toPromise();
from(events).subscribe(events$);
const x = await promise;
console.log('there i am', bug, x);
I get that there is an async behavior going on with concatMap, but I would imagine using toPromise would make RXJS wait for all the events being processed via subscribe to complete before resolving the promise.
In reality my concatMap calls a method that is async and MUST use await based on a library I am using.
Is there some other way to accomplish this? Order of events matters to me which is why I chose concatMap

Answer 1

The solution is at: https://jsfiddle.net/Dave_Stein/nt6Lvc07/.
Rather than trying to subscribe to workingStore$ twice, I can use mergeWith operator in RXJS 7. (There is another way to accomplish this in 6). Using subscribe on the same subject twice is a bad practice that can lead to issues like these apparently.
const { Subject, operators, pipe, BehaviorSubject, from, lastValueFrom } = rxjs;
const { filter, scan, concatMap, mergeWith } = operators;
const run = async (bug) => {
const events$ = new Subject();
const historyChanges$ = new Subject();
const workingStore$ = new BehaviorSubject({});
const scanWorkingStoreMap = {};
events$.pipe(
concatMap((evt => {
return Promise.resolve(evt);
})),
filter((evt) => evt.name === 'history')
).subscribe(historyChanges$);
const newDocs$ = events$
.pipe(
filter((evt) => evt.name === 'new'));
// historyChanges$ is a Subject
historyChanges$
.pipe(
mergeWith(newDocs$),
scan((acc, evt) => {
const { id } = evt;
if (!acc[id]) {
acc[id] = [evt]
} else {
acc[id].push(evt)
}
return acc;
}, scanWorkingStoreMap),
)
.subscribe(workingStore$);
const events = [
{ name: 'new', id: 1},
{ name: 'history', id: 1, data: { a: 1}},
{ name: 'history', id: 1, data: { a: 2}}
]
console.log('here i am', bug);
from(events).subscribe(events$);
console.log('there i am', await lastValueFrom(workingStore$));
}
run();