繁体   English   中英

@ngrx / effects给出了TypeError:你提供了'undefined'来预期流。 您可以提供Observable,Promise,Array或Iterable

[英]@ngrx/effects gives TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

我有一个场景,我需要在我的Angular应用程序中对两个@Ngrx动作进行排序。

第一个操作使用某些数据更新状态,第二个操作使用该数据触发服务器调用。 我正在使用效果对两个动作进行排序,并且仅在第一个动作完成后触发第二个动作。

为了确保第二个操作包括来自状态的最近更新的数据,我将存储注入我的效果并使用选择器函数来检索数据并将其作为第二个操作的有效负载包含在内。

这有效。

我的问题

但是,我相信由于this.actions$已经是一个可观察的流,我应该能够简单地转换该流上的每个事件并将其转换为不同的动作。

我想到的粗略的大理石图: 粗略的想法

我使用withLatestFrom运算符将动作流与来自状态的数据组合在一起。

  @Effect()
  lazyEffect1$ = this.actions$.ofType(LazyActions.TEST_ACTION_SEQUENCE)
     .withLatestFrom(this.filterId$, (x, y) => {
       return new LazyActionDone(y.number);
     });

但是这段代码给了我一个错误:

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

我已经能够使用稍微不同的构造来实现这一点,这也包含在下面的代码中。

但我想了解为什么lazyEffect1不起作用。 我的理解在哪里失败了?

代码

NgRx减速机:

// reducers.ts
export function lazyReducer(
  state: any = {},
  action: LazyAction | LazyActionDone
) {

  switch (action.type) {
    case LazyActions.TEST_ACTION_SEQUENCE: {
      console.info('Action Received in Reducer: ', action.type);
      return {
        ...state,
        number: action.payload
      };
    }

    case LazyActions.TEST_ACTION_SEQUENCE_DONE: {
      console.info('Done Received in Reducer: ', action.type);
      return {
        ...state,
        retrieved: action.payload,
        done: true
      };
    }

    default: {
      return state;
    }
  }
}

NgRx效果:

// effects.ts
@Injectable()
export class LazyEffects {
  private filterId$: Observable<any>;

  constructor(
    private actions$: Actions,
    private store: Store<any>
  ) {
    this.filterId$ = this.store.select(getLazyState);
  }

  // THIS DOES NOT WORK
  @Effect()
  lazyEffect1$ = this.actions$.ofType(LazyActions.TEST_ACTION_SEQUENCE)
     .withLatestFrom(this.filterId$, (x, y) => {
       // console.info(x, y);
       return new LazyActionDone(y.number);
     });

  // THIS WORKS
  @Effect()
  lazyEffect2$ = this.actions$.ofType(LazyActions.TEST_ACTION_SEQUENCE)
    .switchMap((action) => {
      console.info('Action Received in Effects: ', action.type);
      return of(action).withLatestFrom(this.filterId$, (x, y) => new LazyActionDone(y.number));
    });
}

只是说明@cartant 提供的解决方案..我相信解决方案是替换这个属性:

  // THIS DOES NOT WORK
  @Effect()
  lazyEffect1$ = this.actions$.ofType(LazyActions.TEST_ACTION_SEQUENCE)
     .withLatestFrom(this.filterId$, (x, y) => {
       // console.info(x, y);
       return new LazyActionDone(y.number);
     });

有了这个功能:

  @Effect()
  lazyEffect1$() { 
     return this.actions$.ofType(LazyActions.TEST_ACTION_SEQUENCE)
     .withLatestFrom(this.filterId$, (x, y) => {
       // console.info(x, y);
       return new LazyActionDone(y.number);
     });
   }

@cartant在评论中应该得到他的回答,但我想为遇到这个问题的其他人提供答案/示例,并且没有注意到答案在评论中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 类型错误:您在需要流的地方提供了“未定义”。 你可以提供一个 Observable、Promise、Array 或 Iterable 类型错误:您提供了一个预期流的无效对象。 你可以提供一个 Observable、Promise、Array 或 Iterable 错误类型错误:您在需要流的地方提供了“空”。 你可以提供一个 Observable、Promise、Array 或 Iterable 您提供了“未定义”的预期流。 您可以提供一个Observable,Promise,Array或Iterable Rxjs 6:使用catchError()可以为您提供“未定义”的预期流。 您可以提供一个Observable,Promise,Array或Iterable Angular5:TypeError:您提供了&#39;undefined&#39;,其中包含一个流。 您可以提供Observable,Promise,Array或Iterable TypeError:您在预期 stream 的地方提供了“未定义”。 您可以提供 Observable、Promise、Array 或 Iterable。 在<jasmine></jasmine> TypeError:您在需要 stream 的地方提供了“未定义”。 部署angular时可以提供Observable、Promise、Array或Iterable 错误类型错误:您在需要流的地方提供了“未定义”。 您可以在 Angular 服务中提供 Observable、Promise、Array 或 Iterable Angular:您在需要流的地方提供了一个无效的对象。 你可以提供一个 Observable、Promise、Array 或 Iterable
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM