NgRX 8在我的Angular 8中无法正常工作,并出现故障:'toJSON在类型上失败'

问题描述 投票:0回答:1

我从昨天开始一直在尝试将新的NgRX 8添加到我的Angular应用程序中。但是我只停留在一件事上,我不知道问题出在哪里。

我试图为电影制作一个非常简单的示例:

export class Movie {
   public id: number;
   public name: string;
   constructor() {}
}

我的动作是:

export const getAll = createAction('[Movies Page] Load Movies');
export const getAllSuccess = createAction('[Movies Page] Load Movies Success', props<{ payload: Movie[] }>());
export const getAllFail = createAction('[Movies Page] Load Movies Fail', props<{ error: any }>());

我的效果是:

@Injectable()
export class MovieEffects {
   constructor(private actions$: Actions) {
   }

   loadMovies$ = createEffect(() =>
      this.actions$.pipe(
         ofType(getAll),
         switchMap(() =>
            of([movies_array]).pipe(
               map(result => getAllSuccess({ payload: result })),
               catchError(error => of(getAllFail({ error })))
            )
         )
      )
   );
}

我已将所有动作案例添加到我的减速器中:

export interface AppState<T> {
   list: T[];
   isNull: boolean;
   count: number;
   type: StateType;
}

export const initialState: AppState<Movie> = {
   type: StateType.Loading,
   isNull: true,
   count: 0,
   list: new Array<Movie>()
};

const movieRed = createReducer(
   initialState,
   on(MovieActionTypes.getAll, state => ({
      ...state,
      type: StateType.Loading
   })),
   on(MovieActionTypes.getAllSuccess, (state: AppState<Movie>, action) => ({
      ...state,
      type: StateType.Loaded,
      isNull: action.payload == null,
      count: action.payload != null ? action.payload.length : 0,
      list: action.payload
   })),
   on(MovieActionTypes.getAllFail, state => ({
      ...state,
      type: StateType.Error
   }))
);

export function movieReducer(state: AppState<Movie> = initialState, action) {
   return movieRed(state, action);
}

并且在我的模块中添加了forRoot和reducers forRoot的效果。

一切正常。但是当我尝试使用以下方法读取状态时:

this.movies$ = store.pipe(select('list'));

我的结果始终是不确定的,我在我的DevTool中看到此消息

enter image description here

我不知道问题出在哪里。我尝试了许多解决方案,但没有一个对我有用。有人知道为什么以及如何解决它吗?

我从昨天开始一直在尝试将新的NgRX 8添加到我的Angular应用程序中。但是我只停留在一件事上,我不知道问题出在哪里。我试图为...

angular8 ngrx ngrx-store ngrx-effects
1个回答
0
投票

我找到了答案。我错过了定义AppState的过程。

© www.soinside.com 2019 - 2024. All rights reserved.