RxJS distinctUntilChanged - object comparsion

Question

I have stream of objects and I need to compare if current object is not same as previous and in this case emit new value. I found distinctUntilChanged operator should do exa

Answer 1

I had the same problem, and fixed it with using JSON.stringify to compare the objects:

.distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))

Dirty but working code.

Answer 2

Mehdi's solution although fast but wouldn't work if the order is not maintained. Using one of deep-equal or fast-deep-equal libraries:

.distinctUntilChanged((a, b) => deepEqual(a, b))

Answer 3

You can also wrap the original distinctUntilChanged function.

function distinctUntilChangedObj<T>() {
  return distinctUntilChanged<T>((a, b) => JSON.stringify(a) === JSON.stringify(b));
}

This lets you use it just like the original.

$myObservable.pipe(
  distinctUntilChangedObj()
)

Answer 4

From RxJS v6+ there is distinctUntilKeyChanged

https://www.learnrxjs.io/operators/filtering/distinctuntilkeychanged.html

const source$ = from([
  { name: 'Brian' },
  { name: 'Joe' },
  { name: 'Joe' },
  { name: 'Sue' }
]);

source$
  // custom compare based on name property
  .pipe(distinctUntilKeyChanged('name'))
  // output: { name: 'Brian }, { name: 'Joe' }, { name: 'Sue' }
  .subscribe(console.log);

Answer 5

If you change the value mutably, none of the other answers work. If you need to work with mutable data structures, you can use distinctUntilChangedImmutable, which deep copies the previous value and if no comparison function is passed in, will assert that the previous and the current values deep equals each other (not === assertion).

Answer 6

I finally figure out where problem is. Problem was in version of RxJS, in V4 and earlier is different parameters order than V5.

RxJS 4:

distinctUntilChanged = function (keyFn, comparer)

RxJS 5:

distinctUntilChanged = function (comparer, keyFn)

In every docs today, you can find V4 parameters order, beware of that!