Discussion on: The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe

[Stephen Chiang]

I was thinking...if I wanted to do some operation in a component based on a boolean stream, I am forced to subscribe so that I can call the the operation when the right boolean value is received right?

I would have to go from:

this.foo$ = this.store.pipe(select(foo));

to:

this.foo$ = this.store.select(state => {
      this.foo = state.store.foo;
      if (this.foo) {
        this.operationOnFoo();
      }
    });

Is this a correct assumption?

[Tomas Trajan 🇨🇭]

You can also do this.fooExists$ = this.store.pipe(select(foo), filter(foo => !!foo)); then you can also this.fooExists$.subscribe(operation). But why do you have to call something for every foo? Can't it be implemented using ngrx @Effect() ?

[Stephen Chiang]

I only need it to happen once and only one component is listening for it... Sort of like this component telling a sibling component that it is ready to do something... So I thought an effect would be Overkill, plus I'm not calling a new Action, the operation happens internally to the listening component.

[Stephen Chiang]

Would i need to manually unsubscribe in OnDestroy if I did it this way (not @Effect) as you have described?

[Tomas Trajan 🇨🇭]

Yes, whenever you do explicit .subscribe() call, you are automatically responsible to call .unsubscribe(). Even better would be to use .pipe(takeUntil(onDestroy$)) which is declarative ;)

[Stephen Chiang]

awesome, thanks!

so then I would also need to do this, right?

ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.unsubscribe();
  }

[Tomas Trajan 🇨🇭]

ngOnInit() {
   this.source$.pipe(takeUntil(onDestroy$)).subscribe()
}

ngOnDestroy() {
    this.onDestroy$.next(true);
    this.onDestroy$.complete()
}

CHeers!