Более чистый способ подписки на поток действий с NGXS - PullRequest
Новая
       20

Более чистый способ подписки на поток действий с NGXS

0 голосов
/ 29 октября 2018

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

create() {
  this.store.dispatch(new Create(this.form.value)); 
}

этот код запускает следующий сценарий и отправляет CreateSuccess или CreateFailed в зависимости от того, был ли сбой запроса или нет 

@Action(Create)
create({ dispatch }: StateContext<StateInterface>, { entity}: Create) {
  return this.http.post('mybackend', entity).pipe(
    tap<EntityType>(resp => dispatch(new CreateSuccess(resp))),
    catchError(error => dispatch(new CreateFailed(error)))
  ); 
}

Теперь внутри Компонента, где я назвал create(), я слушаю эти два действия. 

this.actions$.pipe(
  ofActionSuccessful(CreateSuccess, UpdateSuccess),
  takeUntil(componentDestroyed(this)) // <--
).subscribe(action => doStuff());

Это все работает безупречно, единственное, что меня беспокоит, это то, что каждый раз, когда я использую это, мне нужно добавить часть takeUntil (), чтобы при отмене компонента подписка отменялась.

Я знаю, что это, вероятно, не является реальной проблемой для всех, но я хотел бы знать, есть ли более чистый способ сделать это.

Я думал о собственном операторе RxJS, который мог бы справиться с этим, но, может быть, есть другие варианты, или (что-то, о чем я ничего не нашел), есть ли способ, которым NGXS сам отменяет подписку?

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

В NGXS метод отправки возвращает наблюдаемое, которое завершится после завершения обработки действия (отмена подписки не требуется). Так что в вашем примере ваше Create действие будет завершено, когда обработчики этого действия будут завершены. Если обработчик возвращает наблюдаемое (как вы это сделали), то завершение связано с завершением этого наблюдаемого. Если бы вы использовали map вместо tap для отправки действия CreateSuccess, тогда исходная наблюдаемая будет ждать, пока эта «дочерняя» наблюдаемая завершится первой. Я бы структурировал обработчик таким образом, чтобы действие Create завершалось только после завершения CreateSuccess: 

@Action(Create)
create({ dispatch }: StateContext<StateInterface>, { entity}: Create) {
  return this.http.post('mybackend', entity).pipe(
    map<EntityType>(resp => dispatch(new CreateSuccess(resp))),
    catchError(error => dispatch(new CreateFailed(error)))
  ); 
}

Тогда в вашем компоненте вы можете сделать это: 

create() {
  this.store.dispatch(new Create(this.form.value))
    .subscribe(action => doStuff()); 
}

Наблюдаемое завершится, когда обработка отправленного действия (и обработка дочернего действия) будет завершена. Отмена подписки не требуется.

0 голосов
/ 30 октября 2018

NGXS не предоставляет никаких специальных функций для отмены подписки на основе жизненного цикла компонента Angular.

Как правило, отмена подписки при уничтожении компонента имеет смысл. Тем не менее, существуют сценарии, в которых вы хотите более конкретный контроль, когда подписываться / отписываться.

Итак, вам придется управлять им в соответствующих функциях жизненного цикла каждого компонента Angular.

...