CODEWITHSUNDEEP
angularrxjsngrxngrx-storengrx-effects
Douglas P.
Douglas P.

Reputation: 560

ngrx/store state not updating in reducer function called

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.

unchanged state

user and isNewUser populated in the action.

action

Error that appears on the console.

enter image description here

Upvotes: 2

Views: 7609

Answers (2)

Andrea Cantore
Andrea Cantore

Reputation: 31

I was struggling with the same problem, and finally I figured out (even if not completely) the problem of this issue. It seems that passing the full result.user generates the error, try to pass the UID instead, or something similar.

Upvotes: 3

timdeschryver
timdeschryver

Reputation: 15505

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

Upvotes: 3

Related Questions