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

Question

我在 angular 应用程序中使用 Angular NGRX 进行状态管理。在调度登录操作时，我从我的登录服务接收到 CognitoUser 对象，因为我正在使用 AWS amplify service.

当我发送 LoginSuccess 操作以传递此对象时，我收到错误 TypeError: Cannot freeze。已发送登录成功操作，但在 reducer 中未收到数据对象。

这是我的效果代码

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
  ) {}
}

但是，如果我像这样将此响应用户分配给另一个对象

const obj = { ...user };

然后我在 reducer 中接收数据但是在 CognitoUser 对象的情况下我没有在 reducer 中接收数据。

如何在 reducer 中传递 CognitoUser 对象？

Answer 1

您似乎正在使用 ngrx-store-freeze 包。它会导致错误。

这里有一个未解决的相关问题：https://github.com/brandonroberts/ngrx-store-freeze/issues/17

这个包显然没有维护，所以我认为你应该在你的项目中删除它。

Answer 2

我的问题是我从服务中获取类型为 CongnitoUser 对象的数据。这就是为什么我无法将该数据传递给 reducer 的原因。但是，如果您在将数据传递给成功操作之前使用 JSON.parse(JSON.stringify(data)) 在正常 json 中转换数据，那么您将能够访问它。

所以效果代码是这样的

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

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

javascript

rxjs

ngrx

angular

aws-amplify