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

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 组件生命周期取消订阅的特殊功能。

一般来说，当一个组件被销毁时取消订阅是有意义的。但是，在某些情况下，您需要更具体地控制何时 subscribe/unsubscribe。

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

Answer 2

在 NGXS 中，调度方法 returns 一个将在操作处理完成后完成的可观察对象（无需取消订阅）。因此，在您的示例中，您的 Create 操作将在操作的处理程序完成时完成。如果处理程序 returns 一个可观察对象（就像您所做的那样），那么完成将链接到该可观察对象的完成。如果您要使用 map 而不是 tap 来调度 CreateSuccess 操作，那么原始可观察对象将首先等待 'child' 可观察对象完成。我会像这样构建处理程序，使 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()); 
}

当分派的动作处理（和 'child' 动作处理）完成时，可观察对象将完成。无需退订。

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

Cleaner way of subscribing to the actions stream with NGXS

redux

angular

ngxs