I want to fire .subscribe() for my oberservable if one of three object keys have changed.

it works, if I copy & paste the method for each key:

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.relations; })
      .subscribe(updatedData => {
        console.log("relations changed",updatedData);
    });

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.parent; })
      .subscribe(updatedData => {
        console.log("parent changed",updatedData);
    });

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.children; })
      .subscribe(updatedData => {
        console.log("children changed",updatedData);
    });

if I set the distinctUntilChanged parer to return the whole updatedData object, my subscribe never fires.

How can I bine the three dinstinctUntilChanged into one reducer?

I want to fire .subscribe() for my oberservable if one of three object keys have changed.

it works, if I copy & paste the method for each key:

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.relations; })
      .subscribe(updatedData => {
        console.log("relations changed",updatedData);
    });

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.parent; })
      .subscribe(updatedData => {
        console.log("parent changed",updatedData);
    });

this.myService.loadData(this.dataContainer.id, true)
      .distinctUntilChanged((updatedData) => { return updatedData.children; })
      .subscribe(updatedData => {
        console.log("children changed",updatedData);
    });

if I set the distinctUntilChanged parer to return the whole updatedData object, my subscribe never fires.

How can I bine the three dinstinctUntilChanged into one reducer?

• javascript
• angularjs
• rxjs

4 Answers 4

I ended up doing:

.distinctUntilChanged((a, b) => a.key1 === b.key1 && a.key2 === b.key2);

One way:

const data$ = this.myService.loadData(this.dataContainer.id, true);

Observable
  .bineLatest(
    $data.distinctUntilChanged(data => updatedData.relations),
    $data.distinctUntilChanged(data => updatedData.parent),
    $data.distinctUntilChanged(data => updatedData.children),
    data => data
  )
  .subscribe(updatedData => {
    console.log("relation|parent|children changed", updatedData);
  });

Another option might be to return all of the data in the selector, and in the parison function, pare the different properties:

this.myService.loadData(this.dataContainer.id, true)
  .distinctUntilChanged((updatedData) => { return updatedData; }, (a, b) => {
    return a.relations === b.relations && a.parent === b.parent && a.children === b.children;
  })
  .subscribe(updatedData => {
    console.log("updatedData", updatedData);
});

Yet another approach with a bit from lodash: (pick + isEqual)

  dashboardMessages$ = this.user$.pipe(
    map((user: User) => pick(user, 'subscriptionStatus', 'payoutsEnabled')),
    distinctUntilChanged(isEqual),
    map((user: Pick<User, 'subscriptionStatus' | 'payoutsEnabled'>) => {
      // there you go... with your partial user model
    }),

  );