1

我有一个像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在 store中订阅了组件，因此将再次调用Line A。反过来，修补表单，因此调用Line B。从而使其成为一个循环。

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

有人可以提出一种更优雅的方法来处理这个问题吗？

注意：我为此使用 NGXS，但我想它不应该有所作为。

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

4

1 回答 1

5

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

您可以为此使用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
};

顺便说一句，还考虑为 NGXS 使用表单插件

于 2018-09-09T17:43:09.163 回答