title: NgRX 8 is not working in my Angular 8 with a failure: 'toJSON failed on Type'
body: <p>I have been trying since yesterday to add the new NgRX 8 to my Angular application. But I am stuck on one thing and I don't know what the problem is.</p>
  
  <p>I have tried to build a very simple example for movies:</p>
  
  <pre><code>export class Movie {
     public id: number;
     public name: string;
     constructor() {}
  }
  </code></pre>
  
  <p>My actions are:</p>
  
  <pre><code>export const getAll = createAction('[Movies Page] Load Movies');
  export const getAllSuccess = createAction('[Movies Page] Load Movies Success', props&lt;{ payload: Movie[] }&gt;());
  export const getAllFail = createAction('[Movies Page] Load Movies Fail', props&lt;{ error: any }&gt;());
  </code></pre>
  
  <p>And my effect is:</p>
  
  <pre><code>@Injectable()
  export class MovieEffects {
     constructor(private actions$: Actions) {
     }
  
     loadMovies$ = createEffect(() =&gt;
        this.actions$.pipe(
           ofType(getAll),
           switchMap(() =&gt;
              of([movies_array]).pipe(
                 map(result =&gt; getAllSuccess({ payload: result })),
                 catchError(error =&gt; of(getAllFail({ error })))
              )
           )
        )
     );
  }
  </code></pre>
  
  <p>I have added all of action cases to my reducer:</p>
  
  <pre><code>export interface AppState&lt;T&gt; {
     list: T[];
     isNull: boolean;
     count: number;
     type: StateType;
  }
  
  export const initialState: AppState&lt;Movie&gt; = {
     type: StateType.Loading,
     isNull: true,
     count: 0,
     list: new Array&lt;Movie&gt;()
  };
  
  const movieRed = createReducer(
     initialState,
     on(MovieActionTypes.getAll, state =&gt; ({
        ...state,
        type: StateType.Loading
     })),
     on(MovieActionTypes.getAllSuccess, (state: AppState&lt;Movie&gt;, action) =&gt; ({
        ...state,
        type: StateType.Loaded,
        isNull: action.payload == null,
        count: action.payload != null ? action.payload.length : 0,
        list: action.payload
     })),
     on(MovieActionTypes.getAllFail, state =&gt; ({
        ...state,
        type: StateType.Error
     }))
  );
  
  export function movieReducer(state: AppState&lt;Movie&gt; = initialState, action) {
     return movieRed(state, action);
  }
  </code></pre>
  
  <p>And added the effects forRoot and reducers forRoot in my module.</p>
  
  <p>Everything works fine. But when I am trying to read the state using: </p>
  
  <pre><code>this.movies$ = store.pipe(select('list'));
  </code></pre>
  
  <p>I result is always undefined and I see this message in my DevTool </p>
  
  <p><a href="https://i.stack.imgur.com/nP7sB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nP7sB.png" alt="enter image description here"></a></p>
  
  <p>I have no idea where the problem is. I have tried many solutions, none has worked for me.
  Does anybody know why and how to fix it?</p>