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)并将其导入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)),
);
当我在谷歌浏览器上打开控制台时,我确实得到了这条线
console.log('State initialized, now getting auth')
并且 Auth 属性已加载。虽然,在 Redux Devtools 上,我只看到:
如你所见:
动作CheckAuthSession
未调度
auth.initialized
仍然是 false
,即使我在控制台记录它,它仍然是 true
。
奇怪的是,当我发送一个新动作时,扩展程序确实提到了它,并且状态更改为 在动作之前的状态。我不确定这是否是正确的行为。
更新 1
当我在checkSession
方法中的tap
之前添加take(1)
管道时,它以某种方式起作用。我不知道为什么。
【问题讨论】:
为您的状态容器类包含@State 定义可能会有所帮助。此外,通常调度会获取操作类的新实例。 能分享一下AuthService的代码吗? @VivekDoshiAuthService.user$
返回 DocumentReference。我没有看到当前状态的原因是因为订阅没有完成。因此,为了不断从观察者那里获取实时数据并获取当前状态,我必须调度和操作,然后在新操作中修补状态,而不是在 tap(..)
中修补操作。
【参考方案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);
花了一些时间才弄明白,但毕竟 - 这样更有意义。
【讨论】:
以上是关于NGXS Devtools 不代表当前状态的主要内容,如果未能解决你的问题,请参考以下文章