ngrx 效果进入无限循环的问题

问题描述

我知道这之前已经被问过很多次了，但我仍然无法理解我的代码出了什么问题。似乎我的效果已经消耗了类固醇，并且根本不会停止无休止地运行。我在 ngrx/store 和 ngrx/effects 版本 10.1.1

代码如下：

home.effects.ts

  public defaultState: DeployedInstanceModel;

  @Effect()
  loadDeployedInstanceData$ = this.actions$
    .pipe(
      
      ofType(DeployedInstancesTypes.GET_TABLE_DATA),mergeMap(() => {
        // reset default state before api call is made
        this.defaultState = {
          data: {}
        };
        return this.analyticsService.getDeployedInstanceData().pipe(
            map(result => {
                this.defaultState.data = result;
                console.log('[deployed-instance] the result of api call is -> ',result);
                return new DeployedInstanceGetData.GetDeployedInstanceAction(this.defaultState);
            }),catchError(err => {
              let errObj = {err: '',url: ''}
              errObj.err = err.statusText;
              errObj.url = err.url;
              console.log('API failure detected on the url -> ',errObj.url);
              this.showErrorPopup();
              return errObj.err;
            })
        );
      })
    )

  constructor(
    private actions$: Actions,private analyticsService: AnalyticsService
  ) { }

这是我尝试从主组件分派我的操作的方式

home.component.ts

ngOnInit(){

    this.state = { data: {}};

    // first dispatch empty state on page load
    this.store.dispatch(new DeployedInstanceGetData.GetDeployedInstanceAction(this.state));
    
    // get the data from the store once api has been called from effects
    this.homeDeployedInstanceStore$ = this.store.select('deployedInstanceModel').subscribe(state => {
      this.totalData = state.data;
      if(Object.keys(this.totalData).length > 0){
          console.log(this.totalData);
          this.loader.stop();
      }else{
        this.loader.start();
      }
      console.log('[Deployed Instance] state from component -> ',this.totalData);
    });
}

我的尝试：

我尝试了下面提到的所有解决方案：

@Effect({dispatch:false}) - 这里的数据被提取一次，但是当我的数据返回主页上显示的空数据时，我的 this.store.select 不会再次被调用

take(1) - 尝试使用此解决方案，但当用户导航出页面并再次返回同一页面时，我无法第二次调用 api。

尝试删除 @Effect 但我又遇到了同样的问题。

如果有人能指出我正确的方向，那将非常有帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）