store.select() called multiples times in ngrx angular

Question

My store.select getting called twice and getting called for click event for save button which is never clicked in application. So can we call store.select in multiple places in component. So can explain some points which are to be remembered while using store in ngrx.

and my state looks like this provide stackblitz link

https://stackblitz.com/edit/angular-gvjoju

So this not entire code but the basic folder structure for my ngrx thanks in advance.

    save(){
  // this.spinner.show();
    if(this.router.url === '/byh/member_details/member_ethnicity'){
       this.ethnicityData();
    }else if(this.router.url === '/byh/member_details/member_name'){
      this.navigationPath.componentName = "member_name";
      this.validateData();
    }else{
      this.navigationPath.componentName = "member_ssn";
    }


    this.store.select('data').subscribe(data => {
      this.currentPageData = data;

    });
    if(Object.keys(this.currentPageData['post']).length > 0) {
      this.response = this.currentPageData['post'];
      this.householdDetails = this.response;
      this.navigation = this.response.serviceModel.navState.next;
    this.navigationModule = this.navigation.moduleName;
    this.navigationPage = this.navigation.pageName;
    this.navigationComponent = this.navigation.componentName;
    if(this.navigation){
      this.spinner.hide();
      this.byhService.SetByhServiceModel(this.householdDetails);
      this.router.navigateByUrl('/'+this.navigationModule+'/'+this.navigationPage+'/'+this.navigationComponent);
      }
    }
    this.isNextClicked = true;
    this.store.dispatch(new TestActions.UpdateMembersForm(this.currentPageData['membersForm']['value']));
  }

Umesh Umesh · Accepted Answer · 2019-12-06T04:07:14

First: You must have a Subscription when selecting data from state and make sure to unsubscribe it when component is destroyed.

// declare subscription
dataSubscription: Subscription;

// assign it when you are selecting state from store
this.dataSubscription = this.store.select('data').subscribe(d => { ... });

// destroy it
ngOnDestroy() {
  this.dataSubscription.unsubscribe();
)

Second: You can have multiple select from store in component, but not ideal. You can combine the selection into one subscription like this link.

store.select() called multiples times in ngrx angular

1 Answers