updating ngrx state using object.assign{}, after state gets updated the page is getting redirect automatically

Question

I am adding the user to ngrx state after successful login. Once logged in adding the same user to the state. After updating user details from profile page section and replacing the state using Object.assign{}, replaces old state with the new data but after that action the page gets redirect automatically.

I tried every possibility to rectify the code. Page automatically redirects me to my home page. I have not used any router.navigate('') anywhere.

I am using: ngrx/store=> v.4.0.4

Below is code for reducer,action and 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));
            })
        );

I am able to update the state using Object.assing{}, getting the proper value in state but page gets redirected.

Yes I do have auth guards, wheree the profile page is accessed via guards only, so only authenticated users can access their profile page.

There are no errors in the console. The dispatch event executes successfully and updates the state with new data.

my routing.ts looks like below:

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

    }

effect of userUpdate

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

I am using Observer on saving to get the change detection to reflect it on screen, is because of observer code i am redirected ?? 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

So in the comments you're using a form with button type submit to login.

Therefore you have to use the (submit) handler binding on your form and your method that gets called by the submit- eventhandler hast to prevent the default behavior by using event.preventDefault().