Using Rxjs to reset an observable with combineLatest

Question

Using Rxjs to reset an observable with combineLatest

My scenario involves 4 different observables being combined using "combineLatest". I am looking for a way to reset the value of observable 2 if observables 1, 3, or 4 emit a value. Is this possible? Thank you!

Mat-table sort change event (Sort class)
Mat-table change page event (PageEvent class)
Custom observable (filter)
Custom observable (other filter)

combineLatest($1, $2, $3, $4).subscribe(([a, b, c, d]) => CALL_HTTP_WITH_PARAMETERS(a, b, c, d))

Example (initial values)

$1 = name,asc
$2 = 2
$3 = bla bla
$4 = bla bla

CALL_HTTP_WITH_PARAMETERS("name,asc", 2, "bla bla", "bla bla")

Observable 1 emits the value "name,desc"

$1 = name,desc
$2 = 2 ==> should be reset to 1
$3 = bla bla
$4 = bla bla

CALL_HTTP_WITH_PARAMETERS("name,desc", 1, "bla bla", "bla bla")

Other scenario

Observable 3 emits the value "new value"

$1 = name,asc
$2 = 2 ==> should be reset to 1
$3 = new value
$4 = bla bla

CALL_HTTP_WITH_PARAMETERS("name,asc", 1, "new value", "bla bla")

javascript angular typescript rxjs

Answer 1

Answer №1

If you're looking for a strategy to reset variables in your code, here's a suggestion:

Let's say you have the following variables: $a, $b, $c, and $d, which are Observables. To reset $b when $a, $c, or $d changes, you can define them as Subjects and then pipe them to reset $b.


const $aSubject = new Subject()
const $bSubject = new Subject()
const $cSubject = new Subject()
const $dSubject = new Subject()
const $a = $aSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)
const $b = $bSubject.asObservable()
const $c = $cSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)
const $d = $dSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)

However, this setup can lead to an infinite loop in the combineLatest() function. To prevent this, you can use the distinctUntilChanged operator on the Observables.

Another issue to address is unnecessary HTTP calls. By using the switchMap operator, you can ensure that only one call is made even if the parameters trigger multiple updates.


combineLatest([$1, $2, $3, $4]).pipe(
  switchMap(([a, b, c, d]) => callHttp(a, b, c, d))
)

For a demonstration of this concept, you can check out this simple demo.

Answer 2

If you're looking for a strategy to reset variables in your code, here's a suggestion:

Let's say you have the following variables: $a, $b, $c, and $d, which are Observables. To reset $b when $a, $c, or $d changes, you can define them as Subjects and then pipe them to reset $b.


const $aSubject = new Subject()
const $bSubject = new Subject()
const $cSubject = new Subject()
const $dSubject = new Subject()
const $a = $aSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)
const $b = $bSubject.asObservable()
const $c = $cSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)
const $d = $dSubject.asObservable().pipe(
  tap(() => $bSubject.next(0))
)

However, this setup can lead to an infinite loop in the combineLatest() function. To prevent this, you can use the distinctUntilChanged operator on the Observables.

Another issue to address is unnecessary HTTP calls. By using the switchMap operator, you can ensure that only one call is made even if the parameters trigger multiple updates.


combineLatest([$1, $2, $3, $4]).pipe(
  switchMap(([a, b, c, d]) => callHttp(a, b, c, d))
)

For a demonstration of this concept, you can check out this simple demo.

Answer 3

Answer №2

There is no way to reset the observable once it's been set.

Consider reevaluating what the observable is tracking and make the necessary adjustments.

One approach could be:

merge($1, $3, $4).pipe(
   tap(_=> this.myGrid.setPage(1))
).subscribe()

If you have no control over the situation, you can create a Subject and utilize the next method.

Here's an example implementation:

subject2 = new Subject<number>();
$2 = this.subject2.asObservable();
onPageChanged(pageNumber:number){
   this.subject2.next(pageNumber);
}

merge($1, $3, $4).pipe(
   tap(_=> this.subject2.next(1))
).subscribe()

Answer 4

There is no way to reset the observable once it's been set.

Consider reevaluating what the observable is tracking and make the necessary adjustments.

One approach could be:

merge($1, $3, $4).pipe(
   tap(_=> this.myGrid.setPage(1))
).subscribe()

If you have no control over the situation, you can create a Subject and utilize the next method.

Here's an example implementation:

subject2 = new Subject<number>();
$2 = this.subject2.asObservable();
onPageChanged(pageNumber:number){
   this.subject2.next(pageNumber);
}

merge($1, $3, $4).pipe(
   tap(_=> this.subject2.next(1))
).subscribe()

Using Rxjs to reset an observable with combineLatest

Answer №1

Answer №2

Similar questions

Unable to redirect with Asp response.redirect

Tips for including the % symbol in the Y-axis labels on a HighChart graph

Guide to transferring filtered data to the controller

Tips for adding color to the <td> element in an ejs file using nodeJS

Enable automatic profile login for the Firebase application

Displaying text that follows the cursor on a JavaScript mouseover event

Assistance for Angular 2 Style Guide within Atom: Feature Needed!

How to retrieve text values across various browsers using Vue.js

Updating an image using AJAX and Flask

Submitting an ajax form with the use of the symbol '&'

Is it possible to have two large text areas situated next to each other, taking up the entire width of the website like in Sublime Text editor, and arranged

Inject components in Angular using dependency injection

Reinitializing the database with Cypress (postgresql)

Sneaky spam and ads embedded within Joomla template

Navigating a plethora of unpredictable identifiers using AngularJS

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

What purpose does a private property serve within the interface?

Transmit information via ajax and receive responses in json format

What is preventing me from being able to effectively transmit the array using the POST method in Express?

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's