时间戳

首页 > 解决方案 > Ngrx Action 需要确保在发送之前检索到来自 http 调用的数据

angular - Ngrx Action 需要确保在发送之前检索到来自 http 调用的数据

问题描述

我需要允许用户从他的位置查看所有其他用户。这意味着如果用户住在以色列，那么通过点击“我的位置”，他需要查看所有来自以色列的用户。

可以使用 http 调用获取用户的位置 因此，当用户单击“我的位置”按钮时，会调度第一个操作，即“GetLocation”。此操作具有操作 GetLocationSuccess 操作的效果，并将位置作为有效负载。

现在我想操作 GetDirectory 动作，它还通过 GetDirectorySuccess 的名称产生效果，它使用 withLatestFrom rxjs 运算符获取当前位置，它也有效果，因为还有另一个 http get 调用。

所以现在问题来了。在容器应用程序中，我正在分派 GetLocation 并立即分派 GetDirectory 操作（具有使用 getLatestFrom 获取当前位置的效果的操作），但最新操作发生在第一个操作的效果已分派“getLocationSuccess”之前，并且我没有得到按位置过滤的用户。

我应该使用另一个效果来侦听“GetLocationSuccess”操作，还是在我确定前一个效果已完成分派其效果并更新数据之后有更好的方法来分派一个操作。

如果一个 Action 需要从一个 http 调用中获取数据，然后再调度它来操作它自己的 http 调用，那么最好的方法是什么？

标签： angularngrx

解决方案

我将为您的每个 http 调用创建 3 个操作以避免任何竞争条件。加载、加载失败和加载成功。然后，您可以轻松地创建效果来监听每个请求的成功并适当地处理它们。

因此，您可以使用以下内容：

loadLocaton$ = createEffect(() => this.actions$.pipe(
  ofType(locationActions.Load),
  mergeMap(() => this.locationService.get().pipe(
    map(location => locationActions.LoadSuccess({location})),
    catchError(err => of(locationActions.LoadFail(err))) 
  ))
));

getDirectory$ = createEffect(() => this.actions$.pipe(
  ofType(locationActions.LoadSuccess),
  map((location) => directoryActions.Load(location))
));

推荐阅读