ngrx ERROR TypeError: action.payload is not iterable

Question

// 动作

export class LoadHerosGeneral implements Action {
  readonly type = HerosActionTypes.LOAD_HEROS_GENERAL;

  constructor(public payload?: IHero[]) {}
}

//减速机

export function heroGeneral(state = initialStateGneral, action: HerosActions): IHero[] {
  switch (action.type) {
    case HerosActionTypes.LOAD_HEROS_GENERAL:
      console.log(action.payload);
      return [ ...state, ...action.payload ];
    default:
      return state;
  }
}

//效果

getHeros$: Observable<Action> = createEffect(() =>
  this.action$.pipe(
    ofType(HerosAction.HerosActionTypes.LOAD_HEROS_GENERAL),
    switchMap(() =>
      this.herosService.getHeros()
        .pipe(
          map((heroGeneral: IHero[]) =>
            new HerosAction.LoadHerosGeneral(heroGeneral)
          ),
          catchError(() =>
            EMPTY
          )
        )
      )
    ),
  );

//服务我包装了服务 // 获取所有英雄

  getHeros(): Observable<IHero[]> {
    return this.generalService.get(`/heroes`);
  }

//一般服务 // 获取

  get(endpoint, params?, headers?): Observable<any> {
    return this.httpClient.get<any>(this.BASE_API_URL + endpoint, {
      ...headers,
      ...params
    })
    .pipe(
      catchError(this.errorHandle)
    );
  }

// 组件

heroGeneral$: Observable<IHero[]>;

  constructor(
    private store: Store<{ heroGeneral: IHero[] }>,
    private herosService: HerosService,
  ) {
    this.heroGeneral$ = store.select('heroGeneral');
  }

  ngOnInit(): void {
    this.getHerosData();
  }

  getHerosData(): any {
     this.store.dispatch(new herosActions.LoadHerosGeneral());
    // this.herosService.getHeros().subscribe(data => console.log(data));
  }

似乎如果我直接在我的组件数据中使用服务但是，如果我发送，控制台会显示

错误

ERROR TypeError: action.payload is not iterable

响应数据应该是数组

任何人都可以帮助我解决这个错误吗？也许是效果部分？

谢谢。

Answer 1

我认为您需要在 tsconfig 中指定一些 lib 以支持此类迭代器。

但您也可以进行快速修复，只需将空负载转换为空数组即可。

return [ ...state, ...(action.payload || []) ];

ngrx ERROR TypeError: action.payload is not iterable

ngrx ERROR TypeError: action.payload is not iterable

ngrx

angular