Question

我想对api调用执行3个操作。 GetItem，GetItemFailed，GetItemSuccess。

我对rxjs运算符不太熟悉，所以我只使用subscribe进行api调用。

类似的东西：

@Action(GetItem)
getItem(sc: StateContext<ItemStateModel>, { payload }: GetItem) {
  sc.patchState({
    isLoading: true
  });

  this.itemService.getItem(payload)
    .subscribe(item => {
      sc.dispatch(new GetItemSuccess(item));
    }, error => {
      sc.dispatch(new GetItemFailed(error));
    });
}

我做了一些谷歌搜索ngxs的例子，发现大多数人使用管道使用tap / take / first，因此我将行动中的订阅重构为类似这样的内容：

  return this.itemService.getItem(payload).pipe(
    tap(({ item }) => {
       return sc.dispatch(new GetItemSuccess(item));
    }),
    catchError(({ error }) => {
      return sc.dispatch(new GetItemFailed(error));
    })
  );

它有效，但是当我检查redux开发工具时，首先在GetItem之前触发GetItemSucess。

任何人都可以向我展示在成功或失败的情况下调用api的正确方法。似乎无法在网上找到一个很好的例子。

Answer 1

NGXS中有一个开放的issue与Redux开发工具中的动作顺序有关-怀疑这就是您所看到的。

Ngxs-正确使用api的方法？

1 个答案: