成功验证操作和组件刷新后，NgRx 状态重置为 Null

Question

成功进行身份验证操作后，NgRx 状态将使用经过身份验证的用户正确更新。但是，在刷新组件或导航时，状态中的数据似乎重置为空。

用户操作：

export const setUser = createAction('[User] Set User', props<{ user: User }>());

index.ts：

export const metaReducers: MetaReducer<AppState>[] = isDevMode() ? [] : [];

用户.reducer：

export interface UserState {
    user: User | null;
  }

  export const initialState: UserState = {
    user: null,
  };

  export const userReducer = createReducer(
    initialState,
    on(UserActions.setUser, (state, { user }) => ({ ...state, user }))
  );

用户选择器：

export const selectUserState = createFeatureSelector<UserState>('user');

export const selectUser = createSelector(
  selectUserState,
  (state) => state.user
);

应用程序状态

import { UserState } from './reducers/user.reducer';

export interface AppState {
  user: UserState;
}

应用程序配置：

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    provideRouter(routes, withComponentInputBinding()),
    provideClientHydration(),
    provideHttpClient(withFetch(), withInterceptorsFromDi()),
    importProvidersFrom([
      HttpClientModule,
      TranslateModule.forRoot(provideTranslation()),
    ]),
    provideAnimations(),
    provideStore(reducers, { metaReducers }),
    provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
  ],
};

我预计，在成功进行身份验证后，NgRx 状态将在组件刷新或导航期间保留用户数据。然而，尽管正确调度了 setUser 操作，状态中的数据似乎在组件刷新或导航时重置为 null。

Answer 1

NgRx 仅将状态保留在内存中（因此在刷新时会丢失其状态）。如果您想在重新加载时保留状态，可以使用本地/会话存储，例如与 https://www.npmjs.com/package/ngrx-store-localstorage

该问题不是在刷新整个页面 (F5) 时发生，而是在应用程序内的组件之间导航而不执行整页刷新时发生。

这不应该发生。但如果没有整个图片/例子，很难说出哪里出了问题。

似乎有什么东西正在重置状态，或者选择器未正确连接。

我建议使用 NgRx DevTools 来查看发生了什么以及影响状态的因素。