@ngrx / effects給出了TypeError：你提供了'undefined'來預期流。 您可以提供Observable，Promise，Array或Iterable

Question

我有一個場景，我需要在我的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));
    });
}

Answer 1

只是說明@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在評論中應該得到他的回答，但我想為遇到這個問題的其他人提供答案/示例，並且沒有注意到答案在評論中。