Currently, I am delving into the world of ngrx, but I seem to have hit a roadblock. I'm encountering an issue that I can't seem to fix on my own. If anyone out there has some insight and expertise to offer, please help me out. I keep running into a TypeError: action.payload is not iterable error. When I modify [...action.payload] to just action.payload in reducer.ts, I get the data I need, however, I actually require the use of [...action.payload]. What could be causing this problem? Thank you.
images.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: [...actin.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,
};