ngrx / store状态未在称为reducer的函数中更新

时间:2019-10-24 00:11:07

标签: angular rxjs ngrx ngrx-store ngrx-effects

我开始将ngrx(8.4.0)添加到现有的Angular(8.2)应用程序中,但是被触发时我的动作之一(请参阅下面的动作)不会使状态发生变化。

auth.actions.ts(部分)

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

loginSuccess操作由下面的reducer函数处理。

auth.reducer.ts(部分)

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

loginSuccess操作是从称为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()))
        )
      )
    )
  );

即使我的动作被触发并且在动作中看到属性userisNewUser,状态也不会更新。

unchanged state

userisNewUser填充在操作中。

action

控制台上显示的错误。

enter image description here

2 个答案:

答案 0 :(得分:2)

代码看起来不错,您可以验证一下吗

  • reducer被调用,您可以在其中放置console.log或调试语句
  • 确保在操作上填充了用户和isNewUser,您可以通过在devtools中单击操作切换来完成此操作

答案 1 :(得分:2)

我一直在同一个问题上挣扎,最后我弄清楚了(即使不是完全)这个问题的问题。 似乎传递完整的result.user会产生错误,尝试传递UID或类似的方法。