ngrx-angular6 中不会发生 API 调用答案

【问题标题】：API call won't happen in ngrx-angular6ngrx-angular6 中不会发生 API 调用
【发布时间】：2019-05-13 12:45:58
【问题描述】：

我是ngrx 的新手。在ngrx-angular6 中不会发生API 调用。我已经尝试了一切。我找不到我错的地方。一整天都在这里浪费了。:(

在 Effects 中，我调用了一项服务并可以观察到

@Effect()
  isFileFeed$ = this.dataPersistence.fetch(LandingActionTypes.LoadIsFileFeed, {
    run: (action: LoadFileFeed, state: LandingState) => {
      const url = `www.sample.com`;
        this.service.apiRequest(url).pipe(
          map(function(status){
            new LoadFileSuccess(status);
          }),
          catchError(err => of(new LoadFileError(err.Description)))
        );
    },

    onError: (action: LoadFileFeed, error) => {
      console.error('Error', error);
      return new LoadFileError(error);
    }
  });

在服务中，我使用了管道和水龙头。如果我直接调用订阅 API 调用调用。但在这里它不会调用任何 API。我也在网络选项卡中进行了验证。

apiRequest(url){
return this.http.get<any>(url)
        .pipe(tap(response =>
            this.log(`Service :api success: ${url}`);
          ),
          catchError(this.handleError)
        );
}

这是我在选择器中的代码

const getLandingState = createFeatureSelector<LandingState>('landing');

const getFileEnableStatus = createSelector(
  getLandingState,
  (state: LandingState) => state.isFileFeedEnabled
);

我已经通过订阅我的组件消耗了我的 observable，如下所示。

    this.landingPageStore.pipe(select(landingSelector.landingQuery.getFileEnableStatus)).subscribe(res=>{
      this.isFileEnabled = res;
    })

【问题讨论】：

标签： angular observable ngrx ngrx-store ngrx-effects

【解决方案1】：

如果您的效果根本没有触发，则可能您从未在 @NgModule 的导入部分中注册它。

@NgModule({
  imports:[
    // Some imports
    EffectsModule.forRoot([MyEffectClass])
  ]
})

另一种可能性是您缺少返回服务的可观察对象，以及 map 函数中的函数，您可能会在以下方面获得更多运气：

return this.service.apiRequest(url).pipe(
  map((status: any) => {
    return new LoadFileSuccess(status)
  }

确保如果将箭头函数包裹在大括号中，则显式添加 return 关键字，否则将无法按预期工作。

【讨论】：