ngrx/store state not updating in reducer function called

Question

I am starting to add ngrx(8.4.0) to an existing Angular(8.2) application but one of my actions (see action below) when triggered does not mutate state.

auth.actions.ts (partial)

export const loginSuccess = createAction(
  '[SIGN IN] Login Success',
  props<{ user: any; isNewUser: boolean }>()

The loginSuccess action is handled by the reducer function below.

auth.reducer.ts (partial)

export interface AuthState {
  user: any;
  isNewUser: boolean;
}

export const initialState: AuthState = {
  user: null,
  isNewUser: null
};

const authReducer = createReducer(
  initialState,
  on(loginSuccess, (state, { user, isNewUser }) => ({
    ...state,
    user: user,
    isNewUser: isNewUser
  }))
);

export function reducer(state: AuthState | undefined, action: Action) {
  return authReducer(state, action);
}

The loginSuccess action is dispatched from an effect called loginWithPopUp.

  loginWithPopUp$ = createEffect(() =>
    this.actions$.pipe(
      ofType(authActions.loginWithPopUp),
      distinctUntilChanged(),
      switchMap(action =>
        from(this.authService.signUpWithPopUp()).pipe(
          map((result: firebase.auth.UserCredential) =>
            authActions.loginSuccess({
              user: result.user,
              isNewUser: result.additionalUserInfo.isNewUser
            })
          ),
          tap(() => this.router.navigate(['/notes'])),
          catchError(() => of(authActions.loginFail()))
        )
      )
    )
  );

Even though my action is triggered and I see the properties user and isNewUser in my action, state is not updated.

user and isNewUser populated in the action.

Error that appears on the console.

Answer 1

The code seems fine, can you verify that:

• the reducer is called, you can put a console.log or a debug statement in there
• make sure the user and isNewUser is populated on the action, you can do this by clicking on the action toggle in the devtools