Angular 7 rxjs BehavioralSubject emiting repeated values

Question

I'm still learning rxjs and run into a problem.

I have a service with a BehavioralSubject intended to hold a single value and emmiting it to other components when changed. The other components will change the value so they comunciate bettween components- I am using it with a component that does an http request to save a document when it recieves a specific value from the subscription (another component is in charge of changing that value). Once I start the application it works fine, but the second time it emits the value 2 times, sending 2 http requests, 3 the 3rd time, 4 the 4th, and so on...

Here is the code for the service

save.service.ts

export class SaveService {

    readonly state: BehaviorSubject<SAVE_STATE>;

    constructor() {
        this.state = new BehaviorSubject(SAVE_STATE.IDLE);
    }

    public save() {
        this.state.next(SAVE_STATE.SAVE);
    }

    public reset() {
        this.state.next(SAVE_STATE.RESET);
    }

    public changed() {
        this.state.next(SAVE_STATE.CHANGED);
    }

    public idle() {
        this.state.next(SAVE_STATE.IDLE);
    }

    public loading() {
        this.state.next(SAVE_STATE.LOADING);
    }

}

Here is the component that changes the value

save-options.component.ts

    private show: boolean;
    private loading: boolean;

    constructor(private saveService: SaveService) { }

    ngOnInit() {
        this.show = false;
        this.saveService.state.subscribe((state) => {
            this.show = state === SAVE_STATE.IDLE ? false : true;
            this.loading = state === SAVE_STATE.LOADING ? true : false;
        });
    }

    saveAction() {
        this.saveService.save();
    }
    discardAction() {
        this.saveService.reset();
    }

Here is the function in the component that recives the value and makes the request, this method is called in the ngOnInit()

create-or-edit.component.ts

    private listenToSaveEvents() {
        this.saveService.state.subscribe((state) => {
            console.log(state);
            switch(state){
                case SAVE_STATE.SAVE:
                    this.saveStore();
                    break;
                case SAVE_STATE.RESET:
                    this.undo();
                    break;
                default:
                    break;
            }
        });
    }

The later function is the one executing multiple times incrementally. the result of the log is: First execution

Second execution

I might be using BehaviorSubject wrong but can't manage to figure out why, thank you.

how you are storing the data into state..? when you are using those service class methods to store the value...? — Ganesh, May 21 '20 at 10:57
You might be facing an issue of memory leaks, save-options component is getting removed when you open create or edit component ? — Ankit Prajapati, May 21 '20 at 10:58

ruth · Accepted Answer · 2020-05-21T11:13:01.860

Probably the create-or-edit.component.ts component is created and destroyed multiple times. As a general rule, it is always safe to unsubscribe in the ngonDestroy() hook to avoid memory leaks.

Option 1

You could try to unsubscribe the subscription in the ngDestroy() hook. Try the following

create-or-edit.component.ts

stateSubscription: any;

private listenToSaveEvents() {
  this.stateSubscription = this.saveService.state.subscribe((state) => {
    console.log(state);
    switch(state) {
      case SAVE_STATE.SAVE:
        this.saveStore();
        break;
      case SAVE_STATE.RESET:
        this.undo();
        break;
      default:
        break;
    }
  });
}

ngOnDestroy() {
  if (this.stateSubscription) {
    this.stateSubscription.unsubscribe();
  }
}

Option 2

It might get difficult to keep track of all the subscriptions and unsubscribe in the ngOnDestroy hook. You could use this solution to workaround it.

Setup the following shared function:

// From https://stackoverflow.com/a/45709120/6513921
// Based on https://www.npmjs.com/package/ng2-rx-componentdestroyed

import { OnDestroy } from '@angular/core';
import { ReplaySubject } from 'rxjs';

export function componentDestroyed(component: OnDestroy) {
  const oldNgOnDestroy = component.ngOnDestroy;
  const destroyed$ = new ReplaySubject<void>(1);
  component.ngOnDestroy = () => {
    oldNgOnDestroy.apply(component);
    destroyed$.next(undefined);
    destroyed$.complete();
  };
  return destroyed$.asObservable();
}

Now all there is to do is to implement ngOnDestroy in the component and add takeUntil(componentDestroyed(this)) to the pipe.

import { pipe } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private listenToSaveEvents() {
  this.stateSubscription = this.saveService.state
    .pipe(takeUntil(componentDestroyed(this)))          // <-- pipe it in here
    .subscribe((state) => {
      console.log(state);
      switch(state) {
        case SAVE_STATE.SAVE:
          this.saveStore();
          break;
        case SAVE_STATE.RESET:
          this.undo();
          break;
        default:
          break;
      }
    });
}

ngOnDestroy() {
}

How about if he is using this service in multiple components.. ? — Ganesh, May 21 '20 at 11:02
Then he needs to unsubscribe in each of the component. I've included one other less tedious way in the answer. — ruth, May 21 '20 at 11:13

Angular 7 rxjs BehavioralSubject emiting repeated values

1 Answers1