Question

因此，我通常有一种在点击时分派动作的方法：

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可以自行取消订阅吗？

Answer 1

NGXS并没有提供任何特殊功能来根据Angular组件的生命周期退订。

通常，取消订阅组件被销毁是有道理的。但是，在某些情况下，您希望在订阅/退订时有更具体的控制。

因此，您将必须在每个Angular组件的适当生命周期函数中对其进行管理。

Answer 2

在NGXS中，dispatch方法返回一个observable，一旦动作处理完成（无需取消订阅），该observable将完成。因此，在您的示例中，您的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()); 
}

可观察对象将在分派动作的处理（和“子”动作处理）完成时完成。无需取消订阅。

使用NGXS订阅动作流的更简洁方法

2 个答案: