自定义 RxJS 操作符无法正常工作

Question

I've been trying to refactor a snippet of code into a custom rxjs operator but I cannot get it to work.

This is my custom operator so far:

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());
};

The idea here is to compare a new list against an old list, if the last item in both lists match, the success callback of the subscribe should not fire. But if the items are not a match, it should.

The issues I'm having right now is:

• <T>(obsv: Observable<T>) => obsv.pipe(ignoreElements()) bit doesn't work as it doesn't fire the success callback.
• When condition is true , the operator returns a boolean rather than the new list. This makes it impossible to bind the new list to this.items in the subscribe success callback.

I use it like:

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 code that has been commented out is the code that I'm trying to refactor, which makes it easy to see what I'm trying to achieve.

How can I fix this?

Answer 1

Edit: This answer assumes you want to actually compare against an external reference list rather than just the previously emitted value of the same observable. That's what your question stated, but if you mean to reference the previous value, take a look at my second answer .

---

Let's make a few observations first:

When condition is true, the operator returns a boolean rather than the new list.

That's what your mapTo(true) does, so just leave that out :-)

ignoreElements()) bit doesn't work as it doesn't fire the success callback.

That's because you don't want to ignore the elements, but just return the observable unchanged in this case.

However, I would not move the condition into the operator – it has nothing to do with it, logically, and you pass the entire logic (the "body" of the if) into the operator anyway.

Furthermore, your operator is currently lacking a proper type signature and creating custom operators can be done in a less verbose anyway, eg using the static pipe function (which we don't even need here, though).

Lastly, we cannot just pass the reference list statically if you want it to be reevaluated on every value coming through, so we need to use a supplier instead.

---

So, let's fix all of this. My proposal for the operator would be this:

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]
  });
}

Then to use this and combine it with the conditional part:

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

See it in action here .

Note that the semantics for the condition are slightly different here since it will be evaluated when the wrapping method is executed, not when the emitted value comes along. I assume this isn't critical here.

Answer 2

Note : This is a second answer, but this time we assume you want to compare against the previously emitted value rather than an external reference list. The general points in my other answer still apply.

If this is the mechanism you need, I strongly would advise using this answer over the one using an external supplier.

---

If the value to compare against should just be the previously emitted value, then you can simply use distinctUntilChanged for this with a custom comparator function. If you insist on wrapping it into a custom operator, it could be this:

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 see it in action here .

However, it might make more sense to only refactor the comparator function into its own function and in the code just use

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

Answer 3

How about this:. I mean - as a skeleton - you could extend the key testing to your needs.

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 use scan() , which is stateful, in conjunction with distnctUntilChanged() . The logic would be pretty much the same.