Question

必须有一种标准的方法来解决此问题，但是我还没有发现任何东西。我可能不正确地搜索我的短语。

我有一个搜索输入字段，按照惯例，我会使用switchmap运算符来取消以前的http请求（当用户继续输入时）。

我已经基于ngxs文档中的示例了

this.actions$
  .pipe(
    ofActionDispatched(SomeAction),
    debounceTime(2000),
    distinctUntilChanged(),
    untilDestroyed(this),
    switchMap(() => {
      return this.store.dispatch(new SomeOtherAction());
    })
  ).subscribe(() => {
});

SomeAction每次用户在输入字段中键入内容并保存在商店中时都会调度（这就是SomeOtherAction没有构造函数参数的原因。）

是否有一个更好的方法来执行此操作，而又没有这个空的订阅块？这看起来像是反模式。

Answer 1

您可以考虑的另一种方法是仅在searchText等之后分派动作以更改debounce的状态。

使用valueChanges在搜索输入表单控件上可观察到的结果，您可以通过调用debounce/distinct/filter来修改状态之前，通过store.dispatch或适合您目的的任意组合进行传递。

然后，您只需要在最短的时间内修改状态，而不是每次按键都可以修改状态，并且还可以从那里调用HTTP请求（而且我认为您不需要在组件中订阅操作流）。 / p>

Doco for Angular Form valueChanges here

在switchMap中分派ngxs操作，忽略返回值

1 个答案: