我们可以将 NgRx 数据与分页样式的 REST API 响应一起使用吗？

Question

我目前正在使用 NgRx Data 对我的项目中的几个实体执行 CRUD 操作。现在，我必须开发分页。因此，REST API 响应将类似于：

{
    "page": 1,
    "per_page": 10,
    "total": 100,
    "total_page": 10,
    "data": [
        { ... },
        { ... },
        { ... }
    ]
}

AFAIK，NgRx 数据适用于实体，我不知道如何处理这个问题。你能把我重定向到一些光吗？谢谢你。

Answer 1

即使我也面临着类似的问题。因此，对于刚接触 NgRx 数据的人，我创建了一个类似于以下内容的EntityDataListInterface ：

{
    page: number,
    per_page: number,
    total: number,
    total_page: number,
    data: EntityDataItem[]
}

对于我正在研究的每个部分，我都会创建不同的服务。我们称之为ComponentService。在此ComponentService内部，我访问 EntityService（实现EntityCollectionServiceBase < EntityDataItem >）和实体的 DataService（实现DefaultDataService < EntityDataListInterface >）。

一旦 API 返回EntityDataListInterface数据，您就可以使用addManyToCache将它们添加到实体缓存中。

在模块内部，通过传递filterFn来注册EntityDataItem。现在，您可以调用setFilter来根据索引（或如下所示的任何分页逻辑）过滤实体，并且可以通过FilteredEntities$访问结果。

//eds: EntityDefinitionService in the constructor

const entityMetadata: EntityMetadataMap = {
      EntityDataItem: {
        filterFn:(entities: EntityDataItem[], pattern:{startIndex: number, endIndex: number}) => {
          return entities.filter((entity, index) => {
            return ((index >= pattern.startIndex) && (index <= pattern.endIndex));
          })
        }
      }
    };
eds.registerMetadataMap(entityMetadata);

在组件中订阅filteredEntities$ ，它将解决分页问题。