如何避免NGRX或NGXS中的循环

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名为UpdateUser存储更改Store.

问题:

问题是当用户输入内容时,它会调度操作来更改商店中的用户(B行).由于组件user在商店中订阅,因此将再次调用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还考虑使用NGXS的表单插件