Angular 6 with NGRX 获得 "You provided ' undefined'，其中预期有流。在调度时”

Question

我正在尝试使用 ngrx 和一个拦截器通过 API 获取一些配方，该拦截器检查 URL 以确定应该使用哪种身份验证 token 。但出于某种原因，我无法弄清楚我得到了以下错误:

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:70)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:67)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Observable._subscribe (scalar.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)

下面是我尝试在我的组件启动时分派(dispatch) Action 的地方:

constructor(private router: Router,
                  private route: ActivatedRoute,
                  private store: Store<fromRecipe.FeatureState>) { }

  ngOnInit() {
    this.recipeState = this.store.select('recipes');
    this.store.dispatch(new RecipeActions.FetchRecipesFromApi());
  }

这是被调用的效果 Action :

@Effect()
    recipesFetchFromAPI = this.actions$
        .ofType(RecipeActions.FETCH_RECIPES_FROM_API)
        .pipe(switchMap((action: RecipeActions.FetchRecipesFromApi) => {
            return this.httpClient.get<ApiSearch>('https://api.edamam.com/search')
            }),
            map(
                (searchResult) => {
                    return {
                        type: RecipeActions.SET_RECIPES,
                        payload: searchResult.hits
                    }
                }
            )
        );

这是我的拦截器，用于检查请求来自哪个 url。

intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{
        if(req.url == 'https://ng-recipe-book-55fbc.firebaseio.com/recipes.json'){
            return this.store.select('auth')
                .pipe(
                    take(1),
                    switchMap((authState: fromAuth.State) => {
                        const clonedReq = req.clone({params: req.params.set('auth', authState.token)});
                        return next.handle(clonedReq);
                    })
                );
        } else if (req.url == 'https://api.edamam.com/search?q=chicken') {
            const clonedReq = req.clone({params: req.params.set('app_id', '123').set('app_key', '123')});
            return next.handle(clonedReq);
        }
    }

我的其他 Action 、 reducer 和效果都在起作用，但这个 Action 。我浏览了论坛，但没有找到解决这个特殊问题的方法。有没有人知道是什么导致了这种情况？如果需要，我很乐意提供更多代码/信息。

Answer 1

我的猜测(您还没有指出问题区域)是 HTTP 响应不是 2xx。您没有处理错误响应，因此您的效果将自行禁用并且不再触发。以下是您应该如何处理错误:

@Effect()
  allFiltersRequested$ = this.actions$.pipe(
    ofType<AllFiltersRequestedAction>(FiltersActionTypes.AllFiltersRequested),
    mergeMap(() =>
      // essential to catchError else an HTTP error response will disable this effect
      this.simService.getAllFilters().pipe(
        catchError(() => {
          return of({})
        })
      )
    ),
    map((allFilters) => new AllFiltersLoadedAction(allFilters))
  )

无论您在 return of 语句中返回什么，都将在失败时传递给 map。该效果也不会自行禁用。这是 Udemy 提倡的方法。