NGXS Devtools 不代表当前状态

Question

所以我开始使用 NGXS，但我在通过 Redux Devtools 检查我的商店时遇到了一些困难

NGXS has devtools package that integrates with Redux Devtools Extension.

我已经安装了最新版本的软件包 (^3.2.0) 并将其导入 AppModule imports:

imports: [
  NgxsModule.forRoot([ProjectState, AuthState], {developmentMode: true}),
  ...
  NgxsReduxDevtoolsPluginModule.forRoot(),
]

在我的 AuthState 上，我做了：

export class AuthState implements NgxsOnInit {

    constructor(private auth: AuthService) {}

    ngxsOnInit({dispatch}: StateContext<AuthStateModel>) {
      console.log('State initialized, now getting auth');
      dispatch(CheckAuthSession);
    }

    @Action(CheckAuthSession)
    checkSession({patchState}: StateContext<AuthStateModel>) {
      return this.auth.user$.pipe(
        tap((user) => patchState({initialized: true, user: user})),
      );
    }

当我在 Google Chrome 上打开控制台时，我确实看到了

console.log('State initialized, now getting auth')

并且已加载身份验证属性。虽然，在 Redux Devtools 上，我只看到：

如您所见：

未调度操作 CheckAuthSession
auth.initialized 仍然是 false 即使当我控制台记录它时，它是 true.

奇怪的是，当我发送一个新动作时，扩展确实提到了它并且状态更改为在动作之前的状态。我不确定这是否是正确的行为。

更新 1

当我在 checkSession 方法中的 tap 之前添加 take(1) 管道时，它以某种方式起作用。我不知道为什么。

Answer 1

我没有在 Devtools 上看到我的操作的原因是操作永远不会结束，因为我没有订阅它。换句话说 - 如果你有一个 returns observable 的动作，在订阅完成之前它不会显示在 Devtools 上。

在我的示例中，我不想完成对我的操作处理程序的订阅，因为我需要监听我的 user$.

的每个更改

所以为了使我的代码合理，我保留了该方法的取消订阅，但我做了一些更改：

我从 checkSession 中删除了 patchState({initialized: true, user: user})，因为这样我就不知道状态是否发生了变化，因为操作不会显示，因为它永远不会结束。
我在 checkSession 方法中的 user$ 的管道内添加了 tap((user) => dispatch(new UpdateAuth(user))。
我创建了一个名为 onUpdateAuth(user: User) 的新方法，它在 UpdateAuth 操作被触发时被调用

像这样：

@Action(UpdateAuth)
onUpdateAuth({patchState}: StateContext<AuthStateModel>, {user}: UpdateAuth) {
    patchState({user});
}

花了一些时间来弄明白，但毕竟 - 这样更有意义。

NGXS Devtools 不代表当前状态

NGXS Devtools doesn't represent the current state

redux

angular

ngxs