NGRX multiple subscription issue with Ionic 4

Ionic Framework
1

I am using ionic 4.1 with ngrx. I have a user selector on Page A and Page b both.

export class ComponentA implements OnInit, OnDestroy {

  private readonly ngUnsubscribe: Subject<void> = new Subject<void>();
  user:any;
  constructor(
    private readonly store: Store<AppState>,
  ) { }

ngOnInit(){}

  ionViewWillEnter(): void {
    this.store.select(getUserState)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe((user) => {
        this.user = user;
      });
  }

  ionViewWillLeave(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
    getUserState.release();
  }

Same subscriptions on page b , when i move from page a to b unsubscribe works but then when i move from b to a and then a to b … subscription on page a doesn’t get unsubscribe. If you traverse back 5 times 5 subscription remains on page a.Both pages get notification. I know in ionic previous page remains in stack so onDestroy() never gets called on forward navigation that is why i have put in subscription and unsubscription in ionic lifecyle hooks.
Not sure if i am not subscribing the right way or missing something. This is giving me hard time.
Please suggest how to fix this . Thanks in advance.

2

I would just use ngneat/until-destroy, but I think what’s wrong with your current situation is that ngUnsubscribe is treated as if it were reusable, but it isn’t. Once you call complete on a a Subject, it’s burned. It can no longer emit anything. So if you want to keep your homebrew solution, you need to instantiate the subject in ionViewWillEnter, not at the point of declaration.

3

Hmmm … quite interesting. I will give a try and see if that works.

4

Thank you @rapropos… It worked