rxjs-distinct-deep

rxjs-distinct-deep

A custom RxJS operator that extends distinctUntilChanged with deep equality comparison, allowing you to detect changes in deeply nested objects or structures. This comparison is done without any external libraries, such as Lodash, using a custom recursive deep equality function.

⭐ If you find this helpful, please consider giving it a star on GitHub! Your support means a lot.

Problem

In reactive programming, you often need to detect changes in the values emitted by an Observable. The default distinctUntilChanged operator in RxJS compares values using strict equality (===), which works fine for primitive types but fails for complex objects like arrays or objects with nested structures.

For example:

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };

console.log(obj1 === obj2); // false (different references, even though values are the same)

Using the default distinctUntilChanged operator would not recognize obj1 and obj2 as equal because of reference comparison. This becomes a challenge when working with complex objects.

Solution

rxjs-distinct-deep solves this problem by performing a deep equality comparison on objects, arrays, or any nested structures. It allows you to detect changes in deeply nested objects, without relying on external libraries like Lodash.

import { distinctUntilChangedDeep } from "rxjs-distinct-deep";
import { of } from "rxjs";

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

of(obj1, obj2, obj3).pipe(distinctUntilChangedDeep()).subscribe(console.log);

Output

{ a: 1, b: { c: 2 } };
{ a: 1, b: { c: 3 } };

Features:

• Deep Equality Comparison: Compares nested structures, ensuring that the values are equal even if the references differ.
• No External Dependencies: This operator uses a custom implementation of deep equality, without relying on any external libraries like Lodash.
• Easy to Use: Simply replace distinctUntilChanged with distinctUntilChangedDeep in your RxJS pipelines.

Installation

To install the package, use npm or yarn:

npm install rxjs-distinct-deep

Or:

yarn add rxjs-distinct-deep

Usage

import { of } from "rxjs";
import { distinctUntilChangedDeep } from "rxjs-distinct-deep";

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };

of(obj1, obj2)
  .pipe(distinctUntilChangedDeep())
  .subscribe((value) => {
    console.log(value); // Emits obj1 only once
  });

Custom Comparator

You can provide a custom comparator function if you'd like to adjust how equality is determined:

import { distinctUntilChangedDeep } from "rxjs-distinct-deep";

const customComparator = (a: any, b: any) => a.a === b.a; // Compare only the 'a' property

of({ a: 1 }, { a: 1 }, { a: 2 })
  .pipe(distinctUntilChangedDeep(customComparator))
  .subscribe(console.log); // Will emit only the first and third values

License

This package is licensed under the MIT License.