Question

我的store.select两次被调用，并为应用程序中从未单击过的保存按钮调用click事件。因此我们可以在组件的多个位置调用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']));
  }

Answer 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。

store.select（）在ngrx角度中被多次调用

1 个答案: