angular - 使用 NGXS 订阅操作流的更简洁方式

Question

所以我通常有一个方法可以在点击时调度一个 Action :

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

此代码触发以下场景并根据请求是否失败分派(dispatch) 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() 的组件内部我正在听这两个 Action 。

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

这一切都完美无缺，唯一困扰我的是每次我使用它时，我都必须添加 takeUntil() 部分，以便在组件被销毁时取消订阅。

我知道这对每个人来说可能都不是一个真正的问题，但我想知道是否有更清洁的方法来做到这一点。

我已经考虑过可以处理此问题的自定义 RxJS 运算符，但也许还有其他选项，或者(我还没有找到任何东西)，NGXS 是否有办法自行取消订阅？

Answer 1

在 NGXS 中，dispatch 方法返回一个 observable，一旦操作处理完成(无需取消订阅)，该 observable 就会完成。所以在你的例子中你的Create当操作的处理程序完成时，操作将完成。如果处理程序返回一个可观察对象(就像您所做的那样)，那么完成将链接到该可观察对象的完成。如果您要使用 map而不是 tap用于发送CreateSuccess操作，那么原始的 observable 将等待那个 'child' observable 首先完成。
我会像这样构造处理程序来制作 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()); 
}

当分派(dispatch) Action 的处理(和“子” Action 处理)完成时，observable 将完成。无需退订。