Explore RxJs DistinctUntilChanged for Deep Object Comparison

Question

Explore RxJs DistinctUntilChanged for Deep Object Comparison

I have a scenario where I need to avoid redundant computations if the subscription emits the same object.

this.stateObject$
  .pipe(distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })))
.subscribe(obj => heavyComputeTask(obj))

The current implementation may fail if the order of keys changes and is not efficient either.

How can I optimize this code?

In addition, to prevent repeating the same code, I intended to create a custom filter pipe like this:

export function ignoreUnChanged<T>(source: Observable<T>): Observable<T> {
  return source.pipe(
    distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })
  ))
}

However, TypeScript throws an error stating that 'MonoTypeOperatorFunction<T>' is not compatible with 'OperatorFunction<T, T>'. Is there a more effective way to resolve this issue?

Thank you in advance.

javascript angular typescript rxjs

Answer 1

Answer №1

If your use-case is straightforward and you don't require the option to configure ignoreUnChanged, then you can simply implement the following solution:

const ignoreUnChangedSimple = distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 }));

...

source$
  .pipe(
    ignoreUnChangedSimple,
  )
  .subscribe(console.log);

There are a few more intricate variations, with the most complex (yet flexible) one looking like this:

export function ignoreUnChanged3<T>(someParams: any): MonoTypeOperatorFunction<T> {
  return (source: Observable<T>) => source.pipe(
    distinctUntilChanged((obj1, obj2) =>
      JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })
    ),
  );
}

Check out the live demo here: https://stackblitz.com/edit/rxjs-teaakn

Answer 2

If your use-case is straightforward and you don't require the option to configure ignoreUnChanged, then you can simply implement the following solution:

const ignoreUnChangedSimple = distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 }));

...

source$
  .pipe(
    ignoreUnChangedSimple,
  )
  .subscribe(console.log);

There are a few more intricate variations, with the most complex (yet flexible) one looking like this:

export function ignoreUnChanged3<T>(someParams: any): MonoTypeOperatorFunction<T> {
  return (source: Observable<T>) => source.pipe(
    distinctUntilChanged((obj1, obj2) =>
      JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })
    ),
  );
}

Check out the live demo here: https://stackblitz.com/edit/rxjs-teaakn

Answer 3

Answer №2

If you're looking for a more efficient way to compare deep objects, I recommend trying out the lodash operator isEqual. Personally, it has been effective for me in the past.

On another note, I can provide assistance with creating custom RxJS operators. A great resource for this is a talk by Ben Lesh and Tracy Lee from ng-conf 2019, which has inspired many of the custom operators I've developed.

A key aspect missing from your code is the necessity to return a new Observable. Observables pipes function purely, so you would need something like this:

export function ignoreUnChanged<T>() {
return (source: Observable<T>) =>
    new Observable<T>(subscriber => {
        return source
            .pipe(
                distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })
            )
            .subscribe({
                next: v => subscriber.next(v),
                error: e => subscriber.error(e),
                complete: () => subscriber.complete()
            });
    });
}

An implementation using this method would look something like:

this.stateObject$.pipe(ignoreUnChanged()).subscribe(obj => heavyComputeTask(obj))

I hope this information proves helpful to you. Best of luck with your project.

Answer 4

If you're looking for a more efficient way to compare deep objects, I recommend trying out the lodash operator isEqual. Personally, it has been effective for me in the past.

On another note, I can provide assistance with creating custom RxJS operators. A great resource for this is a talk by Ben Lesh and Tracy Lee from ng-conf 2019, which has inspired many of the custom operators I've developed.

A key aspect missing from your code is the necessity to return a new Observable. Observables pipes function purely, so you would need something like this:

export function ignoreUnChanged<T>() {
return (source: Observable<T>) =>
    new Observable<T>(subscriber => {
        return source
            .pipe(
                distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 })
            )
            .subscribe({
                next: v => subscriber.next(v),
                error: e => subscriber.error(e),
                complete: () => subscriber.complete()
            });
    });
}

An implementation using this method would look something like:

this.stateObject$.pipe(ignoreUnChanged()).subscribe(obj => heavyComputeTask(obj))

I hope this information proves helpful to you. Best of luck with your project.

Explore RxJs DistinctUntilChanged for Deep Object Comparison

Answer №1

Answer №2

Similar questions

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

Utilizing jQuery to execute functions from various files simultaneously with a single load statement

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Ways to convert JavaScript object to hashmap

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Is it possible to have a page transition when clicking a form button

Need for utilizing a decorator when implementing an interface

What is the process for sending a post request in Ionic 2 to a Node server running on localhost?

Breaking down objects or arrays to extract specific values in React components

Convert a prop into a data attribute using Vue.js 2

Embarking on the journey of launching an Angular application on AWS CloudFront

Update the content of a div on the WordPress homepage with the click of a button

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Troubleshooting issues with the add-comment and remove-comment functionalities in a react-redux application

Displaying JSON data obtained from two separate arrays in AngularJS - is it possible?

Express.js and gridfs-stream are unable to retrieve the error

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

Unable to invoke a custom hook within another custom hook in a React application

The width of table cells expands even when using the box-sizing property set to border-box

Angular Material datepicker designed for multiple input fields