angular - "Progressively"在 NgRx 中从 RESTful API 加载实体

Question

我正在使用 Angular 7 和 NgRx 构建应用程序，并尝试使用实体状态适配器。

我想通过 ID 从 NgRx 请求一个或多个对象，但如果它不在商店中，我想从 RESTful API 请求它，然后将它放入 NgRx 商店。

我构建了 RESTful API 并可以请求具有 ID 数组的任意数量的对象，我了解了如何使用一个或多个 ID 从 NgRx 中选择对象，并且我知道如何使用效果将数据加载到 NgRx 中和 reducer 。

但是，我怎样才能让系统工作，以便如果我通过 ID 请求一个或多个对象，它会从商店返回现有的对象(如果它们存在)和/或通过从 RESTful 请求它们来更新商店API。

有很多数据，所以预加载所有数据效率低下，但有混合用途，我需要显示许多列表，或显示单个数据，或按 ID 显示相关对象等。

例如:

列表页面希望 ID 0-10 显示在列表中。向商店索取它们，商店没有它们，因此它从 API 获取它们。现在商店有 0-10 并且列表显示了它们。

详细信息页面需要 ID 10，商店从之前加载列表页面(在本例中)中获得它，但它也需要 ID 13 和 14，因为它们是相关的，所以我要 10、13和 14。商店有 10，因此它会立即显示，但必须从 RESTful API 请求 13 和 14，并在它们返回时填充商店。

列表页面显示“第 2 页”，即 ID 11-20，而 13 和 14 已经在商店中，因此只需从 API 等获取 11-12 和 15-20 即可。

乘以数千，因为数据太多，无法一次全部加载到本地。

我的错误解决方案:

我关于实现此目的的想法是为 id[] 设置一个选择器，该选择器返回商店中已存在的任何 ID，然后为缺少的 ID 分派(dispatch)一个操作，以便效果器和缩减器完成它们的工作。我不知道如何让选择器派发一个 Action (如果这是正确的方法)。

或者，在请求数据的组件中，它会为未从选择器返回的任何数据分派(dispatch)操作，但将该逻辑放在组件中并不是一个适合它的地方。

我想把它放在一个服务中，这看起来很合理，但我不确定如何将存储/状态传达给组件和服务而不必复制一堆代码，和/或如何通过服务将状态更新传递给组件，以及其他奇怪的实时状态问题。

Answer 1

您可以从选择器返回丢失的 ID(而不是找到的 ID 列表返回一个对象，其中包含找到的实体列表和丢失的 ID 数组(如果有的话))，然后在订阅中(如果您使用 $async，则点击pipe) 调度将通过 Effect 获取丢失的 id 的操作。

像这样:

export const $mySelector = createSelector($someEntitySelector, (entities, props: { ids: string[] }) => {
  const items = [];
  const missingIds = [];

  props.ids.map(id => {
    if (entities[id]) {
       items.push(entities[id]);
    } else {
       missingIds.push(id);
    }

  })

  return {
    items,
    missingIds
  }
});

在组件中:

  this.store$.select($mySelector).pipe(
    tap({items, missingIds} => {
       if (missingIds) {
         // dispatch action that will trigger the effect
       }
    })

  )

您肯定需要处理服务器上没有 ID 的情况(如果服务找不到它，最安全的做法是删除该 ID，这样它就不会无缘无故地再次调用该服务)