NGXS Devtools 不代表当前状态

Posted

技术标签:

【中文标题】NGXS Devtools 不代表当前状态【英文标题】:NGXS Devtools doesn't represent the current state 【发布时间】: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(..) 中修补操作。 【参考方案1】:

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

在我的示例中,我不想完成对我的操作处理程序的订阅,因为我需要监听我的user$ 的每一个变化。

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

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

像这样:

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

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

【讨论】:

以上是关于NGXS Devtools 不代表当前状态的主要内容,如果未能解决你的问题,请参考以下文章

NGXS状态管理:在调用操作时更改状态并将其保存到DB

NGXS 状态不变

NGXS @Select 与状态模型一起使用

NGXS updateItem 状态算子

ngxs、redux 开发工具显示之前的状态

ngxs:在 Action 中访问不同的状态