Учебное пособие по Angular - пошаговое руководство по NgRx

Этот пост является частью серии, в которой я описываю, как построить свой Pokédex с помощью NgRx от новичка до ниндзя. Если вы хотите узнать больше, ссылки на остальные серии статей находятся внизу этой статьи.

Вступление

Очень важно прочитать первую часть этого поста, чтобы вы понимали, что мы создаем. В этом посте мы улучшим код, разработанный в первом посте, с помощью пакета @ngrx/entity, что упростит задачи по созданию редукторов и селекторов.

@ ngrx / объект

Пакет @ngrx/entity - это адаптер для управления коллекциями записей. Этот пакет предоставляет API для управления коллекциями сущностей и запросов к ним.

Следовательно, он сокращает шаблон для создания редукторов, управляющих коллекцией моделей. Он обеспечивает эффективные операции CRUD для управления коллекциями сущностей. Это расширяемые типобезопасные адаптеры для выбора информации об объектах.

Первый шаг - установить пакет, который обеспечит все эти преимущества.

npm i @ngrx/entity

EntityState

EntityState - это предопределенный общий интерфейс для данной коллекции сущностей со следующим интерфейсом:

Причина, по которой мы разработали PokemonState в предыдущем посте с этими двумя атрибутами, показана здесь. Общие атрибуты следующие:

  • ids. Массив всех первичных идентификаторов в коллекции.
  • entities. Словарь сущностей в коллекции, проиндексированных по первичному идентификатору.

Файл pokemon.state.ts заменяется на pokemon.adapter.ts, как показано ниже.

До:

После:

В нашей новой модели мы создали псевдоним PokemonState на основе EntityState с использованием наследования, хотя мы не добавили в состояние никаких новых атрибутов.

С другой стороны, метод createEntityAdapter отвечает за создание адаптера для нашей модели данных Pokemon. Этот адаптер предоставляет нам набор методов для изменения состояния, а также для создания селекторов.

Метод принимает для настройки объект с двумя свойствами:

  • selectId. Метод выбора основного идентификатора коллекции. Необязательно, если у объекта есть первичный ключ ID.
  • sortComparer. Функция сравнения, используемая для сортировки коллекции. Функция сравнения нужна только в том случае, если коллекцию необходимо отсортировать перед отображением. Установите значение false, чтобы оставить коллекцию несортированной, что более эффективно при операциях CRUD.

В нашем случае мы не использовали какие-либо свойства конфигурации, поскольку в этом нет необходимости.

Редукторы

Возвращенный объект адаптера предоставляет набор методов, которые вы можете использовать в своей функции редуктора для управления коллекцией сущностей на основе предоставленных вами действий.

  • getInitialState. Возвращает initialState для состояния объекта на основе предоставленного типа. initialState предоставляется вашей функции редуктора. В нашем случае эта функция заключена в pokemonInitialState.

Методы сбора адаптеров

Адаптер сущности также предоставляет методы для операций с сущностью. Эти методы могут изменять одну или несколько записей одновременно.

Каждый метод возвращает новое измененное состояние, если изменения были внесены, и то же состояние, если никаких изменений не было.

  • addOne: добавить одну сущность в коллекцию.
  • addMany: Добавить несколько сущностей в коллекцию.
  • addAll: заменить текущую коллекцию предоставленной коллекцией.
  • removeOne: удалить одну сущность из коллекции.
  • removeMany: Удалить несколько сущностей из коллекции по идентификатору или по предикату.
  • removeAll: Очистить коллекцию сущностей.
  • updateOne: обновить одну сущность в коллекции.
  • updateMany: обновить несколько объектов в коллекции.
  • upsertOne: добавить или обновить одну сущность в коллекции.
  • upsertMany: добавить или обновить несколько объектов в коллекции.
  • map: обновить несколько сущностей в коллекции, определив функцию карты, аналогично Array.map.

Этот набор методов позволяет нам упростить нашу функцию сокращения, в которой у нас были сложные вложенные объекты для изменения свойств.

Таким образом, обратите внимание на до и после этой функции, где код был сокращен для вызова метода.

До:

После:

Селекторы

Метод getSelectors, возвращаемый созданным адаптером сущности, предоставляет функции для выбора информации из сущности.

Таким образом, четыре наиболее широко используемых селектора:

Наконец, файл pokemon.selector.ts немного изменен, потому что нам не нужно создавать селектор selectAll, поскольку мы будем использовать тот, который предоставлен адаптером.

До:

После:

Заключение

В этом посте мы провели рефакторинг небольшого примера Pokédex с использованием пакета @ngrx/entity.

Использование адаптера снизит ненужную сложность управления состоянием нашего приложения.

Адаптер позволяет нам легко расширять состояние в соответствии с нашими потребностями и имеет наиболее часто используемые операции при работе с состоянием приложения.

Поэтому в этом посте мы рассмотрели следующие темы:

  • Разъединенное управление состоянием визуальных компонентов.
  • Эффективно и легко создавайте элементы управления государством.
  • Создавайте компоненты, которые фокусируются на релевантности: представление.
  • Автоматизируйте создание состояния, поскольку оно очень повторяющееся, используя @ngrx/entity.

В других статьях этой серии будут затронуты такие интересные темы, как:

  • Автоматизация создания эффектов и действий, а также упрощение функции сокращения с помощью @ngrx/entity.
  • Использование паттерна фасада через пакет @ngrx/data.
  • Тестирование состояния приложения.

Важны концепции, а не используемая техника или библиотека. Поэтому этот пост следует воспринимать как руководство для тех, кто запускает большие Angular приложения и должен применять архитектурные принципы.

Другие части серии

  1. Часть 1. Создайте свой Pokédex: Введение в NgR x
  2. Часть 2. Создайте свой Pokédex: @ ngrx / entity
  3. Часть 3. Создайте свой Pokédex: улучшите NgRx с помощью функций create * (скоро)
  4. Часть 4. Создайте свой Pokédex: @ ngrx / data (скоро)
  5. Часть 5. Создайте свой Pokédex: тестирование NgRx (скоро)

Ресурсы