Можем ли мы использовать данные NgRx с ответом REST API в стиле пагинации?

Question

В настоящее время я использую данные NgRx для выполнения операции CRUD с несколькими объектами в моем проекте. Теперь мне нужно разработать нумерацию страниц. Следовательно, ответ REST API будет таким:

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

AFAIK, NgRx Data хорошо работает с сущностями, я понятия не имею, как с этим бороться. Не могли бы вы перенаправить меня на какой-нибудь свет? Спасибо.

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 , чтобы добавить их в кэш сущностей.

Внутри модуля зарегистрируйте EntityDataItem , передав filterFn . Теперь вы можете вызвать 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$ в вашем компоненте, и это решит проблему с нумерацией страниц.