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.

@TonyNgo this is the link for you to see the code but some modification is necessary to login since it's using Google sign in and it's not configured to accept that domain. I can try changing that later. (if you get an issue installing core-js try installing core-js@2 instead) — Douglas P.

timdeschryver timdeschryver · Accepted Answer · 2019-10-24T07:36:03

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

ngrx/store state not updating in reducer function called

2 Answers