Issue with the functionality of a custom RxJS operator

Question

Issue with the functionality of a custom RxJS operator

I've been struggling to transform a snippet of code into a custom rxjs operator, but I'm facing difficulties making it function correctly.

Here is the current implementation of my custom operator:

export const isLastItemTheSame = (oldValue: any[], key: string, condition: boolean) => {

  return condition ? <T>(obsv: Observable<T[]>) => obsv.pipe(
    filter(newValue => {

      try {
        return (oldValue[oldValue.length - 1][key] === newValue[newValue.length - 1][key]);
      }
      catch(err) {
        return false;
      }
    }),
    mapTo(true)
  ) : <T>(obsv: Observable<T>) => obsv.pipe(ignoreElements());
};

This custom operator aims to compare the last items in two lists - old and new. If they match, the success callback of the subscribe should not trigger. However, if they do not match, it should fire.

The challenges I am currently facing include:

The segment
```
<T>(obsv: Observable<T>) => obsv.pipe(ignoreElements())
```
is not functioning as expected and does not initiate the success callback.
When the condition is set to true, the operator returns a boolean instead of the new list. Consequently, binding the new list to this.items in the subscribe success callback becomes unfeasible.

I am using this operator in the following manner:

const source$ = this.api.get<CustomResponse>('events');

source$.pipe(
  first(),
  tap((res) => this.total = res.totalsize || 0),
  map((res) => res.list),
  isLastItemTheSame(this.items, 'eventid', this.items.length && !isReset)
).subscribe((items: IEvent[]) => {

    // if (this.items.length && !isReset) {

    //   if (items[items.length - 1].eventid === this.items[this.items.length - 1].eventid) {
    //     return;
    //   }
    // }

    this.items = isReset ? items : [...this.items, ...items];
  }, (err) => {

    if (err.status !== 401) {

      this.router.navigate(['dashboard']).then(() => {
        this.notifications.newNotification({message: this.translate.instant('NOTIFICATIONS.EVENTS.GET_LIST_ERROR'), theme: 'danger'});
      });
    }
  }
);

The commented-out code within the block is what I aim to refactor, providing clarity on my objective.

How can I overcome these issues?

angular typescript rxjs

Answer 1

Answer №1

Update: The solution provided assumes the need to compare against an external reference list instead of just the previous value emitted by the observable. If you are looking to reference the previous value, please refer to my second response.

Before proceeding, let's consider a few key points:

When the condition is met, the operator will return a boolean rather than a new list.

This explains why using mapTo(true) may not be necessary in this case.

The issue with the ignoreElements() function is that it does not trigger the success callback.

To address this, we should focus on returning the observable as-is without ignoring any elements.

In addition, I believe moving the condition inside the operator is unnecessary and can lead to unnecessary complexity. It's also worth noting that defining custom operators can be done more efficiently using the static pipe function.

Lastly, if you want the reference list to be reevaluated for each incoming value, using a supplier function would be more appropriate.

With those considerations in mind, here's my proposed approach for the operator:

import { OperatorFunction } from 'rxjs';
import { filter } from 'rxjs/operators';

export function filterIfLastElementMatches<T extends Record<any, any>>(
  previousSupplier: () => T[], 
  key: keyof T
): OperatorFunction<T[], T[]> {
  return filter(value => {
    const previous = previousSupplier();
    return !previous.length || !value.length || value[value.length - 1][key] !== previous[previous.length - 1][key]
  });
}

To implement this operator and incorporate the conditional aspect, you can use the following code snippet:

source$.pipe(
  // …
  !isReset ? filterIfLastElementMatches(() => this.items, 'eventid') : tap(),
).subscribe(items => { /* … */ });

You can see this in action here.

Please note that the logic for the condition may behave slightly differently as it will be evaluated when the method is executed, not necessarily when a value is emitted. This distinction may or may not be relevant depending on your specific use case.

Answer 2

Update: The solution provided assumes the need to compare against an external reference list instead of just the previous value emitted by the observable. If you are looking to reference the previous value, please refer to my second response.

Before proceeding, let's consider a few key points:

When the condition is met, the operator will return a boolean rather than a new list.

This explains why using mapTo(true) may not be necessary in this case.

The issue with the ignoreElements() function is that it does not trigger the success callback.

To address this, we should focus on returning the observable as-is without ignoring any elements.

In addition, I believe moving the condition inside the operator is unnecessary and can lead to unnecessary complexity. It's also worth noting that defining custom operators can be done more efficiently using the static pipe function.

Lastly, if you want the reference list to be reevaluated for each incoming value, using a supplier function would be more appropriate.

With those considerations in mind, here's my proposed approach for the operator:

import { OperatorFunction } from 'rxjs';
import { filter } from 'rxjs/operators';

export function filterIfLastElementMatches<T extends Record<any, any>>(
  previousSupplier: () => T[], 
  key: keyof T
): OperatorFunction<T[], T[]> {
  return filter(value => {
    const previous = previousSupplier();
    return !previous.length || !value.length || value[value.length - 1][key] !== previous[previous.length - 1][key]
  });
}

To implement this operator and incorporate the conditional aspect, you can use the following code snippet:

source$.pipe(
  // …
  !isReset ? filterIfLastElementMatches(() => this.items, 'eventid') : tap(),
).subscribe(items => { /* … */ });

You can see this in action here.

Please note that the logic for the condition may behave slightly differently as it will be evaluated when the method is executed, not necessarily when a value is emitted. This distinction may or may not be relevant depending on your specific use case.

Answer 3

Answer №2

Important Note: This response serves as a follow-up to the previous answer, focusing on comparing values against the previously emitted value rather than an external reference list. The key points outlined in my earlier answer remain relevant.

If this specific comparison mechanism aligns with your requirements, I highly recommend utilizing this approach instead of relying on an external provider.

In cases where you only need to compare against the last emitted value, the implementation can be simplified by using distinctUntilChanged along with a custom comparator function. Should you prefer encapsulating it within a custom operator, you could consider the following:

import { OperatorFunction } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

export function distinctUntilLastElementByKey<T extends Record<any, any>>(
    key: keyof T
): OperatorFunction<T[], T[]> {
    return distinctUntilChanged((previous, value) =>
        previous.length && value.length && value[value.length - 1][key] === previous[previous.length - 1][key]
    );
}

You can observe its functionality here.

Alternatively, a more streamlined approach would involve extracting the comparator function into a separate utility and simply utilizing it as follows within the code:

source$.pipe(distinctUntilChanged(createLastItemKeyComparator('eventid')))

Answer 4

Important Note: This response serves as a follow-up to the previous answer, focusing on comparing values against the previously emitted value rather than an external reference list. The key points outlined in my earlier answer remain relevant.

If this specific comparison mechanism aligns with your requirements, I highly recommend utilizing this approach instead of relying on an external provider.

In cases where you only need to compare against the last emitted value, the implementation can be simplified by using distinctUntilChanged along with a custom comparator function. Should you prefer encapsulating it within a custom operator, you could consider the following:

import { OperatorFunction } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

export function distinctUntilLastElementByKey<T extends Record<any, any>>(
    key: keyof T
): OperatorFunction<T[], T[]> {
    return distinctUntilChanged((previous, value) =>
        previous.length && value.length && value[value.length - 1][key] === previous[previous.length - 1][key]
    );
}

You can observe its functionality here.

Alternatively, a more streamlined approach would involve extracting the comparator function into a separate utility and simply utilizing it as follows within the code:

source$.pipe(distinctUntilChanged(createLastItemKeyComparator('eventid')))

Answer 5

Answer №3

Have you considered this approach? Being a skeleton allows you to tailor the key testing according to your specific requirements.

const filterIfLastEqual = () => <T>(source: Observable<T[]>) => {
  return new Observable(observer => {
    let lastValue: T;

    return source.subscribe({
      next(x) {
        const [nowLast] = x.slice(-1);
        if (lastValue !== nowLast) {
          console.log('diff', lastValue, nowLast)
          observer.next(x);
          lastValue = nowLast;
        } else {
          console.log('skipping', lastValue, nowLast)
        }
      },
      error(err) {
        observer.error(err);
      },
      complete() {
        observer.complete();
      }
    })

  })
}

const emitter = new Subject<any[]>();
emitter.pipe(
  filterIfLastEqual(),
).subscribe(
  v => console.log('received value:', v)
)

// test cases
emitter.next([1, 2, 3, 4]);
emitter.next([1, 2, 3, 4]);
emitter.next([1, 2, 3, 5]);
emitter.next([1, 2, 3, '5']);

You could also implement scan() along with distnctUntilChanged(), utilizing stateful logic for achieving similar results.

Answer 6

Have you considered this approach? Being a skeleton allows you to tailor the key testing according to your specific requirements.

const filterIfLastEqual = () => <T>(source: Observable<T[]>) => {
  return new Observable(observer => {
    let lastValue: T;

    return source.subscribe({
      next(x) {
        const [nowLast] = x.slice(-1);
        if (lastValue !== nowLast) {
          console.log('diff', lastValue, nowLast)
          observer.next(x);
          lastValue = nowLast;
        } else {
          console.log('skipping', lastValue, nowLast)
        }
      },
      error(err) {
        observer.error(err);
      },
      complete() {
        observer.complete();
      }
    })

  })
}

const emitter = new Subject<any[]>();
emitter.pipe(
  filterIfLastEqual(),
).subscribe(
  v => console.log('received value:', v)
)

// test cases
emitter.next([1, 2, 3, 4]);
emitter.next([1, 2, 3, 4]);
emitter.next([1, 2, 3, 5]);
emitter.next([1, 2, 3, '5']);

You could also implement scan() along with distnctUntilChanged(), utilizing stateful logic for achieving similar results.

Issue with the functionality of a custom RxJS operator

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to modify the CSS injected by an Angular Directive?

The performance of linting has significantly decreased following the upgrade of nx/angular, particularly for the plugin import/no-deprecated

An automatic conversion cannot handle spaces and prohibited characters in Object keys

Is there a way to access the final child element within a mat-accordion component using Material-UI and Angular 8?

Should compile time errors be triggered by generic function constraints?

A simple way to retrieve data from Firebase using the unique identifier (ID)

Angular service helps in resolving concatenate error by utilizing good practices

Unlocking the power of NgRx entity: Leveraging updateOne and updateMany with effects

"Unsuccessful API request leads to empty ngFor loop due to ngIf condition not being

Custom CSS identifier for interactive MuiButton text element

What is the best way to automatically close a sidebar in Angular 8 depending on the window size when the page loads?

The reason for the error message "Error: Cannot find module '@nx/nx-darwin-arm64'" occurring during an npm install in an Angular project is due to

Generating a random number to be input into the angular 2 form group index can be done by following these

Bidirectional data binding in Angular 2 for the class attribute

Using a Typescript typeguard to validate function parameters of type any[]

A missing Array.at() method has been reported in TypeScript array type

Best practices for structuring TypeScript type declarations for a function module containing numerous private classes

Retrieve all the characteristics accessible of a particular course

Access-Control-Allow-Methods is not permitting the use of the DELETE method in the preflight response for Angular 2

Utilizing GraphQL subscriptions to dynamically update objects in response to specific events