使用 object.assign{} 更新 ngrx 状态，状态更新后页面会自动重定向

Question

我在成功登录后将用户添加到 ngrx 状态。登录后，将同一用户添加到状态。从个人资料页面部分更新用户详细信息并使用Object.assign{} 替换状态后，用新数据替换旧状态，但在此操作之后页面会自动重定向。

我尝试了各种可能性来纠正代码。页面自动将我重定向到我的主页。我没有在任何地方使用过任何router.navigate('')。

我正在使用：ngrx/store=> v.4.0.4

下面是reducer、action和effect的代码：

effects.ts

@Effect()
    userUpdate$ = this.actions$
        .ofType(AuthActions.USER_UPDATE)
        .map((action: AuthActions.userUpdate) => action.payload)
        .mergeMap(response => 
          this.authService.retrieveLoggedUser(response.uid, response.token) //will get the user details
            .map(res => {
                var resObj = { user: res };
                return resObj;
            }).switchMap(user =>new UserActions.loadUserUpdate(resObj.user) //returns new action to update the user in state
            )
            .catch((error: any) => {
                return of(new UserActions.loadUserFailure(error));
            })
        );

我可以使用Object.assing{} 更新状态，获得正确的状态值，但页面被重定向。

是的，我确实有身份验证防护，其中个人资料页面只能通过防护访问，因此只有经过身份验证的用户才能访问他们的个人资料页面。

控制台中没有错误。调度事件成功执行并使用新数据更新状态。

我的 routing.ts 如下所示：

const appRoutes: Routes = [
    { path: '', component: HomepageComponent, },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'user/updateprofile', component: EditProfileComponent, canActivate: [AuthGuard] },
    { path: '**', redirectTo: 'pagenotfound' }
];

constructor(private db: Database, private router: Router, private store$: Store, private spinnerService: SpinnerService) { this.spinnerService.show(); }

verifyTheUser(): Observable<boolean> {
    return this.db.query('user').map(user => user).take(1);
}

authGuard.ts

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.verifyTheUser().map(res => {
            if (res != undefined && res != null && res['user'] != undefined && res['user'] != null) {
                if (res['user'].uid != 0) {
                    this.isLoggedIn = true;
                } else if (res['user'].uid == 0) {
                    this.isLoggedIn = false;
                }
            }
            console.log(this.isLoggedIn);

            return this.isLoggedIn;
        });

    }

用户更新的效果

  userUpdate$ = this.actions$
            .ofType(AuthActions.USER_UPDATE)
            .map((action: AuthActions.userUpdate) => action.payload)
            .mergeMap(response => this.authService.retrieveLoggedUser(response.uid, response.token)
                .map(res => {
                   var resObj = { user: {user: res, id: response.id } };
                    return resObj;
                }).switchMap(response =>
                    this.db.insert('user', [response.user])
                        .map(() => new UserActions.loadUserUpdate(response.user))
                )
                .catch((error: any) => {
                   return of(new UserActions.loadUserFailure(error));
                })
            );

我在保存时使用观察者来获取更改检测以在屏幕上反映它，是因为观察者代码我被重定向了吗？？ this.profileObserver.next(data);

profilecomponent.ts

 UpdateTheProfileInfo(requestData) {
    this.loading = true;
    this.auth.updateInfo(requestData, this.uid).subscribe(() => {
this.UpdateTheUser();
    }, error => {
console.log(error);
    });
  }

  UpdateTheUser() {
    if (this.uid != undefined && this.uid != null && this.keyID != undefined && this.keyID != null) {
      this.store$.dispatch(new AuthActions.userUpdate({ uid: this.uid, token: this.token, id: this.keyID }));
    }

Answer 1

所以在 cmets 中，您使用带有按钮类型 submit 的表单来登录。

因此，您必须在表单上使用 (submit) 处理程序绑定，并使用 submit 调用的方法 - 事件处理程序必须通过使用 event.preventDefault() 来防止默认行为。