Angular 8 NgRx - Issue: Uncovered action that cannot be serialized

Question

Angular 8 NgRx - Issue: Uncovered action that cannot be serialized

In order to include a global Error object in my app state, I implemented an http interceptor to trigger the setError action:

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

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

However, upon dispatching this action, an error message is returned:

Error: Detected unserializable action at "errorObj.responseError"

The configuration for my app module looks like this:

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

I am trying to understand what it means by "unserializable". Is there a way to disable this for specific actions?

javascript angular typescript redux ngrx

Answer 1

Answer №1

It seems like the issue is originating from the following line:

 props<{ errorObj: IlgError }>

My suggestion would be to store a plain object in your store similar to this:

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

Answer 2

It seems like the issue is originating from the following line:

 props<{ errorObj: IlgError }>

My suggestion would be to store a plain object in your store similar to this:

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

Answer 3

Answer №2

To resolve the issue, one option is to pass an object with properties in the props object. However, this approach can become complicated when dealing with a large number of properties in the object.

A more efficient solution would be to define the action as follows:

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

Then, you can use the following code 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)),)
      ))
    )
  );

Answer 4

To resolve the issue, one option is to pass an object with properties in the props object. However, this approach can become complicated when dealing with a large number of properties in the object.

A more efficient solution would be to define the action as follows:

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

Then, you can use the following code 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)),)
      ))
    )
  );

Angular 8 NgRx - Issue: Uncovered action that cannot be serialized

Answer №1

Answer №2

Similar questions

Unable to retrieve the object property despite its presence

What is the process for obtaining the home directory path of a computer using JavaScript?

The name field in the request body is currently undefined

Difficulty accessing `evt.target.value` with `RaisedButton` in ReactJS Material UI

Generate a series of inquiries from an API response and display them dynamically, complete with a text field and radio button for each question

What is the best way to resend a request once the token has been refreshed?

Integrate jQuery into your Spring MVC application

Issue with Redirect URI in Angular application causing authentication problems for Strapi and Microsoft integration

Utilizing Conditional Statements in the @artsy/fresnel Framework

:host-selector for Angular Material dialog

The use of PartialLinkText is ineffective when utilized in TypeScript

Why is my node.js react app failing to detect the index.html file?

Having trouble dealing with the response following $resource.save in AngularJS, specifically expecting JSON data

SQL message comparison error within mysql module is malfunctioning

The Javascript function is malfunctioning, unable to assign the 'onclick' property to null

Your search parameter is not formatted correctly

Top tips for accessing a file that has been uploaded using the $http service and the HTML5

Encountering an issue with Sails.js while attempting to connect to a cloud-based

Creating effective test cases for Angular JS controllers

To begin, formulating a blank state entity containing a collection of key-value pairs with JSON objects as the values. Subsequently, modifying the contents of