NgRX 8 не работает в моем Angular 8 из-за ошибки: 'to JSON fail on Type' - PullRequest
Новая
       34

NgRX 8 не работает в моем Angular 8 из-за ошибки: 'to JSON fail on Type'

0 голосов
/ 26 февраля 2020

Со вчерашнего дня я пытался добавить новый 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);
}

И добавил эффекты для Root и редукторы для Root в моем модуле.

Все отлично работает. Но когда я пытаюсь прочитать состояние, используя: 

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

Я всегда получаю неопределенный результат и вижу это сообщение в своем DevTool

enter image description here

Понятия не имею, в чем проблема. Я перепробовал много решений, ни одно из них не помогло мне. Кто-нибудь знает почему и как это исправить?

1 Ответ

0 голосов
/ 26 февраля 2020

Я нашел ответ. Я пропустил определение AppState. 

export interface AppState {
   movieReducer: ReducerState<Movie>;
}

и в модуле: 

StoreModule.forFeature('movieReducer', movieReducer),
...