[Fixed] Angular NGXS TypeError: Cannot freeze

Issue

The code that dispatches the action

  constructor(auth: AuthService, private store: Store) {
    this.userAuth = auth.signedIn.subscribe({ next: (user) => {
      this.user = user;
      this.store.dispatch(new SetUser(user));
    }});
  }

The actions definition

import firebase from 'firebase/app';

export class SetUser {
  static readonly type = '[firebase.User | null] Add';

  constructor(public payload: firebase.User | null) {}
}

And my store implementation:

    @Action(SetUser)
    add({ patchState }: StateContext<UserStateModel>, { payload }: SetUser): void {
        patchState({
            user: payload
        });
    }
@State<UserStateModel>({
    name: 'user',
    defaults: {
        user: null
    }
})

Solution

This is basically a dupe.

The problem is you’re trying to store something in state that can’t be frozen. Just clone it, or save just the pieces you need. See my answer here.