RxJS timeout on NGXS Select Observable?

user_10145810 0
Viewed 389

I am facing a strange issue and hoping someone can shed some light for me.

I have a slice of my state that is getting updated on an interval (let's say every 10 seconds for the sake of this question). I want to subscribe to the selector for that piece of state and timeout if the state is not updated for that value in X amount of time. I am using rxjs timeout operator to do this.

@Select(MyState.myValue) myValue$: Observable<number>;

setInterval(() => //updating MyState with a new myValue, 10000);

myValue$
    .pipe(timeout(20000))
    .subscribe({
        next: myValue => console.log(myValue),
        error: err => console.log(err)
    })

What I am seeing is that the TimeoutError is being thrown after 20 seconds regardless of how frequently the values are being emitted.

HOWEVER, the timeout DOES work if I just apply it to the Observable returned by the interval() function. With the below code, I never see the TimeoutError, which is what I expect to happen with the code above for NGXS.

interval(10000)
    .pipe(timeout(20000))
    .subscribe({
        next: myValue => console.log(intervalValue),
        error: err => console.log(err)
    })

So it seems like there's some issue with the Observable being returned by the Select decorator?

observable rxjs ngxs angular timeout
2 Answers

when using timeout operator, you should provide a callback function to the with property. otherwise it emit an TimeoutError;

for you problem, you should provide a value to each parameter as well. each parameter defines The time allowed between each pushed value from the source before the resulting observable will timeout

example =>

test$.pipe(
   timeout({
     each: 1000,
     with: () => functionExecutedWithTimeout()
   })
)

refer official documentation of timeout operator for more information

user_63510480

or you can use debounceTime it is rxjs operator and it is easier

example

this.subject.pipe(
debounceTime(500))
    .subscribe({
        next: myValue => //do anything,
        error: err => //do anything
    })

resource debounceTime

user_170080870
Related