store.selector() 在ngrx angular中多次调用答案

【问题标题】：store.select() called multiples times in ngrx angularstore.selector() 在ngrx angular中多次调用
【发布时间】：2020-03-27 02:18:00
【问题描述】：

我的 store.select 被调用两次，并被调用用于保存按钮的单击事件，该按钮从未在应用程序中单击。那么我们可以在组件的多个地方调用 store.select 吗？所以可以解释一下在ngrx中使用store时要记住的一些要点。

我的状态看起来像这样提供 stackblitz 链接

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

所以这不是完整的代码，而是我的 ngrx 的基本文件夹结构提前感谢。

    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']));
  }

【问题讨论】：

标签： angular ngrx ngrx-store

【解决方案1】：

首先：从状态中选择数据时必须有Subscription，并确保在组件被销毁时取消订阅。

// 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();
)

第二：您可以在组件中进行多项选择，但并不理想。您可以将所选内容合并到一个订阅中，例如 this link。

【讨论】：