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

【问题标题】：Where to make API call and how to structure actions在哪里进行 API 调用以及如何构建操作
【发布时间】：2019-06-30 15:25:11
【问题描述】：

我最近开始从 ngrx 迁移到 ngxs，并且有一个设计问题，即我应该将一些调用放在哪里。

在 NGRX 中，我将为与 api 的每次交互创建 3 个操作。比如：

GetEntities - 表示已进行初始 api 调用 GetEntitiesSuccess - 表示成功返回数据 GetEntitiesFail - 表示返回数据不成功

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

在 NGXS 中，我是在操作发生时从存储本身进行 api 调用，还是应该使用其他一些 NGXS 对象来处理这些 API 调用，然后以与我在 ngrx 中相同的方式处理这些操作（通过每次调用创建多个操作）？

【问题讨论】：

标签： ngxs

【解决方案1】：

我见过的大多数示例，以及我如何使用它是从状态中的操作处理程序进行 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());
      })
   ); 
}

这个 q/a 也可能有用Ngxs - Actions/state to load data from backend

【讨论】：