angular - NGXS Devtools 不代表当前状态

问题描述

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

NGXS 具有与Redux Devtools Extension集成的devtools 包。

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

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.initializedfalse即使我控制台记录它仍然存在，它是true.

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

更新 1

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

标签： angularreduxngxs

我没有在 Devtools 上看到我的操作的原因是因为我没有订阅它，所以该操作从未结束。换句话说 - 如果您有一个返回 observable 的操作，则在订阅完成之前它不会显示在 Devtools 上。

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

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

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

像这样：

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

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

angular - NGXS Devtools 不代表当前状态

问题描述

解决方案

推荐阅读