使用LocalStorage的AuthToken为NgRx Store充水的正确方法和位置

Question

从 LocalStorage 充水状态的正确RxJS / NgRx正确方式是什么？

说应用程序需要通过从 LocalStorage 中读取AuthToken来了解用户是否已登录。这应该是在初始化NgRx Store之后的第一件事。

在这种情况下，AuthStore有一个动作initAuth，在从 LocalStorage 读取令牌时，其关联的Effect在服务的帮助下填充状态。

当前，我正在AppComponent的initAuth内部调度ngOnInit：

@Component({
    selector: 'app-root',
    ...
})
export class AppComponent implements OnInit {
    constructor(protected readonly store$: Store<State>) {
    }

    ngOnInit(): void {
        this.store$.dispatch(authActions.initAuth());          
    }
}

但是感觉应该有更好的方法。

我当时正在考虑将效果与以下@ngrx/effects/init动作相关联以调度initAuth（如果可能，如何实现？）：

注意：我没有使用ngrx-store-localstorage。

Answer 1

您可以使用ROOT_EFFECTS_INIT操作并在效果中执行任何您想要的操作。

import { ofType, Actions, Effect, ROOT_EFFECTS_INIT } from '@ngrx/effects';

class InitEffects {
  @Effect()
  init$ = this.actions$
    .ofType(ROOT_EFFECTS_INIT)
    .pipe(tap(() => window.alert('I should be shown')));

  constructor(private actions$: Actions) {}
}

还请确保以forRoot方法注册此效果，功能模块将无法工作。