依赖于其他效果结果的连锁效果

Question

我有一家 bag 和 favorites 的商店。目前有一项行动要 REMOVE_FROM_BAG。这会触发一个副作用，即从 API 中将物品从您的包中移除，该 API 调度 REMOVE_FROM_BAG_COMPLETE 实际上将其从商店中移除。

我们正在添加一个操作 MOVE_FROM_BAG_TO_FAVORITES，它将从 bag 中删除一个项目并将其放入 favorites。如果 remove API 调用失败，则不应继续执行任何其他操作。整体流程为：

MOVE_BAG_TO_FAVORITES
REMOVE_FROM_BAG
@Effect Api Call
REMOVE_FROM_BAG_COMPLETE
ADD_TO_FAVORITES

因此，如果 Api 调用失败，该物品不应从包店中删除或添加到您的收藏夹列表中。

// REMOVE_FROM_BAG side effect; API call; success removes item from the store
@Effect()
removeFromBag = this.actions$
  .ofType(REMOVE_FROM_BAG)
  .switchMap(({ payload }) => this.bagService.remove(payload)
    .map(() => ({ type: REMOVE_FROM_BAG_COMPLETE, payload })
    .catch(() => of({type: REMOVE_FROM_BAG_FAIL }))
  );

至于将项目移动到收藏夹，我也可以触发 REMOVE_FROM_BAG 作为副作用，但我不确定如何确定副作用是否成功（即链接它).

@Effect()
moveFromBagToFavorites = this.actions$
  .ofType(MOVE_FROM_BAG_TO_FAVORITES)
  .mergeMap(({ payload }) => [
    { type: REMOVE_FROM_BAG, payload },
    { type: ADD_TO_FAVORITES, payload },
  ]);

理论上这应该可行，但我不确定如何防止 ADD_TO_FAVORITES 在 REMOVE_FROM_BAG 因 API 调用失败而失败的情况下被调度。有没有更好的方法来链接有副作用的操作？

Answer 1

不纯的 effect 调用比纯 reduce 调用更容易失败。

所以我会先执行你的效果调用：

@Effect Api Call -- Effect
API_CALL_COMPLETE -- Redux (should change state)
  MOVE_BAG_TO_FAVORITES -- Redux
  REMOVE_FROM_BAG -- Redux
  REMOVE_FROM_BAG_COMPLETE -- Not necessary anymore
  ADD_TO_FAVORITES -- Redux

如果API调用失败，则不需要回滚。

依赖于其他效果结果的连锁效果

Chain effects with dependency on the result of other effects

angular

typescript

ngrx

ngrx-effects