Question

我有一个类似user-personal-details.component.ts的组件。与user中存储的Store保持同步

@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
})

并调度名为Action的{{1}}来将更改存储在UpdateUser中。

问题：

问题是当用户键入内容时，它将调度操作以更改商店中的用户（ B行）。由于组件已在商店中订阅了Store，因此将再次调用 A行。反过来，对表格打补丁，从而调用 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
};

BTW也考虑使用form plugin for NGXS

如何避免NGRX或NGXS中的循环

1 个答案: