Angular 8 NgRx - Error: Detected unserializable action

问题

I need to have a global Error object in my app state. So I created an http interceptor to dispatch setError action:

export interface IlgError {
  message: string;
  responseError: HttpErrorResponse;
}

export const setError = createAction("[Global] Error Occurred", props<{ errorObj: IlgError }>());

but when I dispatch I get the error:

Error: Detected unserializable action at "errorObj.responseError"

My settings for app module:

StoreRouterConnectingModule.forRoot({ routerState: RouterState.Minimal }),

What exactly does it mean "unserializable"? Can I disable this for some of my actions?

回答1:

I believe that the error is coming from this line:

 props<{ errorObj: IlgError }>

I recommend that you put a plain object into your store into something like this:

export const login = createAction(
    '[Login Page] Login',
    props<{username: string; password: string;}>(),
)

回答2:

Passing an object with properties in props object would solve the issue, but it would become cumbersome when you have quite a few number of properties in the object to be passed.

The better way would be to defined the action as:

export const login = createAction(
 '[Login Page] Login',
  props<IlgError>(),
)

and use below to dispatch the action

  loadMovies$ = createEffect(() => this.actions$.pipe(
    ofType('[Login Page] Login'),
    mergeMap(() => this.moviesService.getAll()
      .pipe(
        map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
        catchError((error: IlgError) => of(failureAction(error)),)
      ))
    )
  );

来源：https://stackoverflow.com/questions/57153800/angular-8-ngrx-error-detected-unserializable-action