Angular+ngrx: как сохранить состояние хранилища при обходе URL-адреса маршрутизатора?

Question

Я знаю, что магазин сбрасывается каждый раз, когда пользователь обновляет страницу (так называемое "жесткое обновление"), но я надеялся, что он останется без изменений, когда пользователь перебирает страницы с помощью углового маршрутизатора. Но, как я вижу, все равно сбрасывается.

Я ошибся? Есть ли способ сохранить хранилище без сохранения в LocalStorage или других хаков?

app.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    // Routing
    import { AppRoutingModule } from './app-routing.module';

    // Ngrx
    import { StoreModule } from '@ngrx/store';
    import {
      StoreRouterConnectingModule,
      RouterStateSerializer,
    } from '@ngrx/router-store';
    import { StoreDevtoolsModule } from '@ngrx/store-devtools';
    import { EffectsModule } from '@ngrx/effects';

    // Other
    import { reducers, metaReducers } from './core/reducers';
    import { CustomRouterStateSerializer } from './core/utils/router.utils';
    import { MaterialModule } from './material/material.module';

    // Environment
    import { environment } from '../environments/environment';

    // Components
    import { AppComponent } from './app.component';
    import { NotFoundComponent } from './core/components/not-found.component';
    import { NotAuthorizedComponent } from './core/components/not-authorized.component';
    import { HomeComponent } from './core/components/home.component';
    import { UsersModule } from './users/users.module';
    import { EventsModule } from "./events/events.module";

    @NgModule({
      declarations: [
        AppComponent,
        NotFoundComponent,
        HomeComponent,
        NotAuthorizedComponent,
      ],
      imports: [
        CommonModule,
        HttpClientModule,
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        MaterialModule,
        StoreModule.forRoot(reducers, { metaReducers }), 
        StoreRouterConnectingModule.forRoot({stateKey: 'router'}),
        StoreDevtoolsModule.instrument(),
        EffectsModule.forRoot([]),
        UsersModule,
        EventsModule

  ],
  providers: [
    { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

./core/reducers/index.ts

import {
  ActionReducerMap,
  ActionReducer,
  MetaReducer, createFeatureSelector, createSelector,
} from '@ngrx/store';
import { environment } from '../../../environments/environment';
import { RouterStateUrl } from '../utils/router.utils';
import * as fromRouter from '@ngrx/router-store';
import * as fromAuth from '../../users/reducers/auth.reducer';

import { storeFreeze } from 'ngrx-store-freeze';

export interface State {
  router: fromRouter.RouterReducerState<RouterStateUrl>,
  auth: fromAuth.State;
}

export const reducers: ActionReducerMap<State> = {
  router: fromRouter.routerReducer,
  auth: fromAuth.reducer
};

export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return function(state: State, action: any): State {
    console.log('state', state);
    console.log('action', action);

    return reducer(state, action);
  };
}

export const metaReducers: MetaReducer<State>[] = !environment.production
  ? [logger, storeFreeze]
  : [];

// AUTH reducers
export const selectAuthState = createFeatureSelector<fromAuth.State>('auth');

export const getUser = createSelector(
  selectAuthState,
  fromAuth.getUser
);
export const getLoaded = createSelector(
  selectAuthState,
  fromAuth.getLoaded
);
export const getError = createSelector(
  selectAuthState,
  fromAuth.getError
);

Идея состоит в том, чтобы получить учетные данные пользователя с сервера через HTTP GET, поместить их в хранилище и затем получить их из хранилища вместо сервера. Итак, у меня есть охранник

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private store: Store<State>, protected router: Router) {
  }

  protected getFromStoreOrAPI(): Observable<any> {
    return this.store
      .select(getUser)
      .do(user => {
        if (!user) this.store.dispatch(new Signin());
      })
      .filter(user => user)
      .take(1);
  }

  canActivate(): Observable<boolean> {
    return this.getFromStoreOrAPI()
      .switchMap(() => Observable.of(true))
      .catch(() =>  Observable.of(false));
  }
}

на this.store.dispatch(new Signin()); он делает HTTP-вызов и помещает данные в хранилище.

Проблема в том, что он делает HTTP-вызовы каждый раз, когда пользователь переходит на новую страницу.

Answer 1

Так глупо с моей стороны! Используемый <a href="/link">Link</a> вместо <a routerLink="/link">Link</a>!

Answer 2

Проверьте ваши редукторы, я уверен, что вы допустили ошибку, забыв вернуть состояние в вашем операторе switch:

switch(action.type){
       ...
        default:
            return state;
}