Angular NGRX cannot pass data to reducer when dispatching action from effect. Got Error - TypeError: Cannot freeze

Question

I am using Angular NGRX for state management in my angular application. On dispatching login action i receives CognitoUser object from my login service as i am using AWS amplify service.

When i dispatch LoginSuccess action to pass this object i receives error TypeError: Cannot freeze. Login Success action is dispatched but data object is not received in reducer.

Here is my effect code

export class LoginEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(LoginActions.login),
      switchMap((action) =>
        from(this.authService.login(action.username, action.password))
      ),
      catchError((error) => of(LoginActions.loginError(error))),
      map((user) => LoginActions.loginSuccess(user))
   )
  );

  // ... other effects
  constructor(
    private actions$: Actions,
    private authService: AuthService,
    private router: Router
  ) {}
}

However if i assign this response user into another object like this

const obj = { ...user };

Then i am receiving data in reducer but in case of CognitoUser object i am not receiving data in reducer.

How can i pass CognitoUser object in reducer?

I have the same issue, also not using ngrx-store-freeze. Did you make any progress? — Andresch Serj
@AndreschSerj my issue was that i was getting data of type CongnitoUser object from service. That's why i was not able to pass that data to reducer. But if you convet your data in normal json using JSON.parse(JSON.stringify(data)) before passing it to success action than you will be able to access it. — Vinit Singh
If you can put that into an answer you can get teh 50 Point Bounty i just set on your question :-) — Andresch Serj

Vinit Singh Vinit Singh · Accepted Answer · 2020-08-29T06:42:52

My issue was that i was getting data of type CongnitoUser object from service. That's why i was not able to pass that data to reducer. But if you convet your data in normal json using JSON.parse(JSON.stringify(data)) before passing it to success action than you will be able to access it.

So effect code will be like this.

login$ = createEffect(() =>
this.actions$.pipe(
  ofType(LoginActions.login),
  switchMap((action) =>
    from(this.authService.login(action.username, action.password))
  ),
  catchError((error) => of(LoginActions.loginError(error))),
  map((user) => {
     user = JSON.parse(JSON.stringify(user));
     LoginActions.loginSuccess(user)
  })
 )
);

Angular NGRX cannot pass data to reducer when dispatching action from effect. Got Error - TypeError: Cannot freeze

2 Answers