NGXS Devtools 不代表当前状态答案

【问题标题】：NGXS Devtools doesn't represent the current stateNGXS Devtools 不代表当前状态
【发布时间】：2019-01-17 22:00:41
【问题描述】：

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

NGXS has devtools package 与Redux Devtools Extension 集成。

我已经安装了最新版本的包（^3.2.0）并将其导入AppModuleimports：

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})),
      );
    }

当我在谷歌浏览器上打开控制台时，我确实得到了这条线

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

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

如你所见：

动作CheckAuthSession 未调度
auth.initialized 仍然是 false，即使我在控制台记录它，它仍然是 true。

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

更新 1

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

【问题讨论】：

为您的状态容器类包含@State 定义可能会有所帮助。此外，通常调度会获取操作类的新实例。
能分享一下AuthService的代码吗？
@VivekDoshi AuthService.user$ 返回 DocumentReference。我没有看到当前状态的原因是因为订阅没有完成。因此，为了不断从观察者那里获取实时数据并获取当前状态，我必须调度和操作，然后在新操作中修补状态，而不是在 tap(..) 中修补操作。

标签： angular redux ngxs

【解决方案1】：

我没有在 Devtools 上看到我的 Action 的原因是因为我没有订阅它，所以该操作从未结束。换句话说 - 如果你有一个返回 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});
}

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

【讨论】：