NGXS Devtools不代表当前状态

Question

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

NGXS has devtools package与Redux Devtools Extension集成。

我已经安装了该软件包的最新版本（^ 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})),
      );
    }

当我在Google Chrome浏览器中打开控制台时，我确实知道了

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

然后将加载Auth属性。尽管在Redux Devtools上，我只能看到：

如您所见：

• CheckAuthSession操作未派发
• auth.initialized仍为false，true仍为take(1)。

奇怪的是，当我调度新操作时，扩展程序确实提到了该操作，并且状态更改为操作前。我不确定这是否正确。

更新1

当我在tap方法中的checkSession之前添加Uri gmmIntentUri = Uri.parse("google.navigation:q=Taronga+Zoo,+Sydney+Australia"); Intent mapIntent = new Intent(Intent.ACTION_VIEW, gmmIntentUri); mapIntent.setPackage("com.google.android.apps.maps"); startActivity(mapIntent); 管道时，它以某种方式起作用。我不知道为什么。

Answer 1

之所以没有在Devtools上看到我的动作，是因为该动作没有结束，因为我没有订阅它。换句话说-如果您有一个操作返回一个可观察值，那么在订阅完成之前，该操作不会显示在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});
}

花点时间弄清楚，但毕竟-这样更有意义。