代码之家 › 专栏 › 技术社区 › Sandeep Gupta

如何避免NGRX或NGXS中的循环

ngxs ngrx angular

1

Sandeep Gupta · 技术社区 · 6 年前

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
  };
}

用户

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

派一个 Action UpdateUser 将更改存储在 商场 .

问题:

B线 ). 由于订阅了组件 用户 在商店里, A线将再次调用。反过来,修补窗体,从而调用 B线

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

有人能提出一个更优雅的方法来处理这个问题吗?

编辑

1 回复 | 直到 6 年前

1

5

Martin Nuc 6 年前

我认为,在加载表单时,您应该在表单开始时只使用user from store填充表单一次。以后对用户窗体的任何更改都不应再更改窗体。在这种情况下,形式将是真理的源泉。它不会同步数据从

你可以用 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