TypeError: action.payload is not iterable

Question

你好，我现在正在研究ngrx，但是遇到了一个大问题。我不知道如何解决它。有人可以帮助我... 我得到 TypeError: action.payload is not iterable 错误。如果我在 reducer.ts 中将 [...action.payload] 更改为仅 action.payload，我可以获得数据但我需要使用 [...action.payload]。什么是问题？谢谢

图片.reducer.ts

import { Image } from "../../../Image/models/image.model";

import * as ImagesActions from "./images.action";

export interface State {
  images: Image[];
}

const initialState: State = {
  images: [],
};

export function imagesReducer(
  state = initialState,
  action: ImagesActions.ImagesActions
) {
  switch (action.type) {
    case ImagesActions.GET_IMAGES:
      console.log(state.images);
      console.log("get images reducer ", action.payload);

      return {
        ...state,
        images: [...action.payload],
      };
    default:
      return state;
  }
}

images.effect.ts

fetchImages$ = createEffect(
    () => {
      console.log("fetch images effect ");

      return this.actions$.pipe(
        ofType(ImagesActions.FETCH_IMAGES),
        map((action: ImagesActions.FetchImages) => action.payload),
        switchMap(() => {
          return this.http.post<Image[]>(this.globalUrl + "/admin/image");
        }),
        map((images) => {
          console.log(images);

          //return images.map((image) => {
          return {
            ...images,
            //images: image ? image : [],
          };
          //});
        }),
        map((images) => {
          console.log("fetch images effect images ", images);
          return new ImagesActions.GetImages(images);
        })
      );
    }
  );

images.action.ts


export class GetImages implements Action {
  readonly type = GET_IMAGES;
  constructor(public payload: Image[]) {}
}

app.reducer.ts

import { ActionReducerMap } from "@ngrx/store";

import * as fromUsers from "../admin/users/store/users.reducer";
import * as fromImages from "../admin/image/store/images.reducer";
import * as fromPosts from "../admin/post/store/posts.reducer";

export interface AppState {
  users: fromUsers.State;
  images: fromImages.State;
  posts: fromPosts.State;
}

export const appReducer: ActionReducerMap<AppState> = {
  users: fromUsers.usersReducer,
  images: fromImages.imagesReducer,
  posts: fromPosts.postsReducer,
};

Answer 1

您在这里创建的是对象，而不是数组。

        switchMap(() => {
          return this.http.post<Image[]>(this.globalUrl + "/admin/image");
        }),
        map((images) => {
          return {
            ...images,
          };
        }),

示例：

{ ...['a', 'b', 'c'] }
-->
{0: "a", 1: "b", 2: "c"}

TypeError: action.payload is not iterable

TypeError: action.payload is not iterable

typescript

redux

ngrx

angular