如何避免 NGRX 或 NGXS 中的循环

Question

我有一个类似 user-personal-details.component.ts 的组件。与存储在 Store

中的 user 保持同步

@Select() user$: Observable<IUser>;
user:IUser;
ngOnInit() {
  this.user$.subscribe((user:IUser)=>{
    this.user = user;
    this.form.form.patchValue(user);//LINE A: fill the form using user data
  };
}

此组件有一个表单来填写有关 user 的详细信息。没有保存按钮，每次用户输入这些组件时，我都会通过

检测到更改

this.form.valueChanges.debounce(2000).subscribe((formData)=>{
    this.store.dispatch(new UpdateUser(formData));//Line B
})

并分派一个名为 UpdateUser 的 Action 来存储 Store 中的更改。

问题：

问题是当用户输入某些内容时，它会调度操作来更改存储中的用户（B 行）。由于组件在商店中订阅了 user，因此将再次调用 Line A。反过来，修补表单因此调用 Line B。从而使它成为一个循环。

避免这种情况的一种方法是在表单更改时更改状态，因为这不会触发操作，因此不会调用 B 行。但我认为在 Redux 中不推荐这样做。

有人可以建议更优雅的方法来处理这个问题吗？

注意：我为此使用了 NGXS，但我想应该不会有什么不同。

编辑：由于这个问题被否决了，我对这个问题做了很大的修改，使问题最小化。

Answer 1

我认为您应该在开始加载表单时仅使用商店中的用户填充表单一次。以后对用户表单的任何更改都不应再更改表单。在那种情况下，表格将成为事实的来源。它不会再从商店同步数据，而是同步到商店。

您可以为此使用 take 运算符：

this.user$.pipe(take(1)).subscribe((user:IUser)=>{
  this.user = user;
  this.form.form.patchValue(user);//LINE A: fill the form using user data
};

顺便说一句，也可以考虑使用 form plugin for NGXS

如何避免 NGRX 或 NGXS 中的循环

How to avoid loops in NGRX or NGXS

ngrx

angular

ngxs