CODEWITHSUNDEEP
rxjsobservablebehaviorsubjectsubjectcombinelatest
Mr.FloppyDisk
Mr.FloppyDisk

Reputation: 61

Rxjs wait for observable

The problem that I'm trying to solve is:

A) get some data from backend then set it as global variable (let's say)

B) if data from A) is set then react for an button click on UI and emit next value on BehaviourSubject

C) when the data from A) is set and button from B) have been clicked do something else.

Currently my solution is

const loadData$ = this.getData().pipe(tap(x => save data to global variable));
const updateNumber = new BehaviourSubject(undefined);
const updateNumber$ = updatePage.asObservable();

combineLatest([loadData$, updateNumber$]).subscribe(([_, someNumber]) => {
   this.something(someNumber)
})

The problem with this solution is: combineLatest reacts on loadData$ but first value returned from updateNumber$ is undefined so this.something(param) is invoked with undefined param. I can of course check if someNumber != undefined but I'am thinking about usage of some fancy rxjs operators. Any ideas ?

Upvotes: 1

Views: 2233

Answers (1)

Pankaj
Pankaj

Reputation: 568

Instead of using combineLatest, you can use a combination of withLatestFrom and BehaviorSubject

let globalStream = new BehaviorSubject<any>(null);
let globalStream$ = globalStream.asObservable();


this.getData().subscribe((s) => {
  console.log('Setting Global state: ', s);
  globalStream.next(s);
});

let source1 = button1Click$.pipe(
  withLatestFrom(globalStream$),
  map(([c, data]) => {
    return data;
  }),
  filter((t) => !!t)
);

let source2 = button2Click$.pipe(
  withLatestFrom(globalStream$),
  map(([c, data]) => {
    return data;
  }),
  filter((t) => !!t)
);

source1.subscribe((s) => console.log('Button 1 handled', s));
source2.subscribe((s) => console.log('Button 2 handled', s));

Here's a stackblitz demo.

Upvotes: 1

Related Questions