angular - 依赖于其他效果结果的链式效果

Question

我有一家商店，里面有bag 和favorites。当前有一个REMOVE_FROM_BAG 操作。这会触发一个副作用，即通过 API 将元素从您的包中移除，该 API 会调度 REMOVE_FROM_BAG_COMPLETE，这实际上会将其从商店中移除。

我们正在添加一个操作 MOVE_FROM_BAG_TO_FAVORITES，它将从 bag 中删除一个项目并将其放入 favorites。如果删除 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 被分派(dispatch)，以防 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 调用失败，则无需回滚。