Angular 如何在调用this.store.dispatch（新登录名（{authToken:user.accessToken}））时更新reducer状态

当重新加载我的url localhost:4200时，@ngrx/store/reducer更新工作，我的存储状态

   // Angular
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
// RxJS
import { filter, mergeMap, tap, withLatestFrom } from 'rxjs/operators';
import { defer, Observable, of } from 'rxjs';
// NGRX
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Action, select, Store } from '@ngrx/store';
// Auth actions
import { AuthActionTypes, Login, Logout, Register, UserLoaded, UserRequested } from '../_actions/auth.actions';
import { AuthService } from '../_services/index';
import { AppState } from '../../reducers';
import { environment } from '../../../../environments/environment';
import { isUserLoaded } from '../_selectors/auth.selectors';

@Injectable()
export class AuthEffects {
   @Effect({dispatch: false})
   login$ = this.actions$.pipe(
       ofType<Login>(AuthActionTypes.Login),
       tap(action => {
           localStorage.setItem(environment.authTokenKey, action.payload.authToken);

           this.store.dispatch(new UserRequested());
       }),
   );

   @Effect({dispatch: false})
   logout$ = this.actions$.pipe(
       ofType<Logout>(AuthActionTypes.Logout),
       tap(() => {
           localStorage.removeItem(environment.authTokenKey);
           this.router.navigate(['/auth/login'], {queryParams: {returnUrl: this.returnUrl}});
       })
   );

   @Effect({dispatch: false})
   register$ = this.actions$.pipe(
       ofType<Register>(AuthActionTypes.Register),
       tap(action => {
           localStorage.setItem(environment.authTokenKey, action.payload.authToken);
       })
   );

   @Effect({dispatch: false})
   loadUser$ = this.actions$
   .pipe(
       ofType<UserRequested>(AuthActionTypes.UserRequested),
       withLatestFrom(this.store.pipe(select(isUserLoaded))),
       filter(([action, _isUserLoaded]) => !_isUserLoaded),
       mergeMap(([action, _isUserLoaded]) => this.auth.getUserByToken()),
       tap(_user => {
           if (_user) {
               this.store.dispatch(new UserLoaded({ user: _user }));
           } else {
               this.store.dispatch(new Logout());
           }
       })
     );

   @Effect()
   init$: Observable<Action> = defer(() => {
       const userToken = localStorage.getItem(environment.authTokenKey);
       let observableResult = of({type: 'NO_ACTION'});
       if (userToken) {
           observableResult = of(new Login({  authToken: userToken }));
       }
       return observableResult;
   });

   private returnUrl: string;

   constructor(private actions$: Actions,
       private router: Router,
       private auth: AuthService,
       private store: Store<AppState>) {

       this.router.events.subscribe(event => {
           if (event instanceof NavigationEnd) {
               this.returnUrl = event.url;
           }
       });
   }
}

我的auth.action.ts

    import { Action } from '@ngrx/store';
import { User } from '../_models/user.model';

export enum AuthActionTypes {
    Login = '[Login] Action',
    Logout = '[Logout] Action',
    Register = '[Register] Action',
    UserRequested = '[Request User] Action',
    UserLoaded = '[Load User] Auth API'
}



export class Login implements Action {  
    readonly type = AuthActionTypes.Login;

    constructor(public payload: { authToken: string }) { }
}


export class Logout implements Action {
    readonly type = AuthActionTypes.Logout;
}

export class Register implements Action {
    readonly type = AuthActionTypes.Register;
    constructor(public payload: { authToken: string }) { }
}


export class UserRequested implements Action {
    readonly type = AuthActionTypes.UserRequested;
}

export class UserLoaded implements Action {    
    readonly type = AuthActionTypes.UserLoaded;
    constructor(public payload: { user: User }) { }
}



export type AuthActions = Login | Logout | Register | UserRequested | UserLoaded;

---

initialAuthState

是设置初始还原程序状态，调度的操作不会修改

initialAuthState

，但会修改还原程序状态。

initialAuthState

是设置初始还原程序状态，调度操作不会修改

initialAuthState

，但会修改reducer状态

    import { Action } from '@ngrx/store';
import { User } from '../_models/user.model';

export enum AuthActionTypes {
    Login = '[Login] Action',
    Logout = '[Logout] Action',
    Register = '[Register] Action',
    UserRequested = '[Request User] Action',
    UserLoaded = '[Load User] Auth API'
}



export class Login implements Action {  
    readonly type = AuthActionTypes.Login;

    constructor(public payload: { authToken: string }) { }
}


export class Logout implements Action {
    readonly type = AuthActionTypes.Logout;
}

export class Register implements Action {
    readonly type = AuthActionTypes.Register;
    constructor(public payload: { authToken: string }) { }
}


export class UserRequested implements Action {
    readonly type = AuthActionTypes.UserRequested;
}

export class UserLoaded implements Action {    
    readonly type = AuthActionTypes.UserLoaded;
    constructor(public payload: { user: User }) { }
}



export type AuthActions = Login | Logout | Register | UserRequested | UserLoaded;