在哪里进行 API 调用以及如何构建操作

Jak*_*ova 5 ngxs

我最近开始从 ngrx 迁移到 ngxs,并且有一个关于我应该在哪里放置一些调用的设计问题。

在 NGRX 中,我会为每次与 api 的交互创建 3 个操作。就像是:

GetEntities - 指示初始 api 调用已完成 GetEntitiesSuccess - 指示成功返回数据 GetEntitiesFail - 指示未成功返回数据

我将创建一个效果来监视实际调用 API 的 GetEntities 操作,并通过使用结果有效负载调用成功/失败操作来处理响应。

在 NGXS 中,我是在操作发生时从商店本身进行 api 调用,还是有一些其他 NGXS 对象可以用来处理这些 API 调用,然后以我在 ngrx 中所做的相同方式处理这些操作(通过创建每次调用多个操作)?

Gar*_*son 6

我见过的大多数示例以及我使用它的方式都是从状态中的操作处理程序进行 API 调用,然后当 API 返回时立即修补状态。

然后,在补丁调用之后,您可以根据需要调度一个操作来指示成功/失败。像这样的东西:

@Action(GetSomeData)
loadData({ patchState, dispatch}: StateContext<MyDataModel>, {payload}: GetSomeData) {

   return this.myDataService.get(payload.id)
   .pipe(
      tap((data) => {
        patchState({ data: data});
        // optionally dispatch here
        dispatch(new GetDataSuccess());
      })
   ); 
}  
Run Code Online (Sandbox Code Playgroud)

此问答也可能有用Ngxs - 从后端加载数据的操作/状态