Как избежать петель в NGRX или NGXS - PullRequest
Новая
       61

Как избежать петель в NGRX или NGXS

0 голосов
/ 09 сентября 2018

У меня есть такой компонент, как 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 в магазине, Line A будет вызван снова. Что, в свою очередь, исправляет форму, вызывая Line B . Таким образом, делая это цикл.

Одним из способов избежать этого является изменение состояния при изменении формы, потому что это не будет запускать действие и, следовательно, строка B не будет вызываться. Но я думаю, что это не рекомендуется в Redux.

Может кто-нибудь предложить более элегантный способ решения этой проблемы?

Примечание: я использую NGXS для этого, но я думаю, что это не должно иметь никакого значения.

Редактировать : Поскольку вопрос был опущен, я внес большой вклад в этот вопрос, чтобы сделать проблему минимальной.

1 Ответ

0 голосов
/ 09 сентября 2018

Я считаю, что вы должны заполнять форму пользователем из магазина только один раз в начале, когда форма загружена. Любое последующее изменение пользовательской формы не должно больше изменять форму. Форма будет источником правды в этом случае. Он больше не будет синхронизировать данные из хранилища, кроме хранилища.

Для этого вы можете использовать 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

...