РЕДАКТИРОВАТЬ: В последнее время эта статья привлекала внимание читателей, и я обновил библиотеку с «Dynamic NGRX» на «EZNGRX» и получил новый репозиторий. Поэтому я обновил статью, чтобы отразить эти изменения. Не стесняйтесь обращаться ко мне с любыми вопросами — я искренне верю, что это самая простая реализация NGRX, которую вы только можете себе представить.

В первый день у меня было почти 10 читателей с моим другим постом, поэтому в качестве продолжения моего чрезвычайно успешного первого поста я решил пойти дальше и добавить функцию, за которую, как я знаю, вы все умираете — как мне подключиться NGRX к асинхронным сервисам сейчас, поскольку вы так сильно упростили процесс?

Что ж, еще раз, к счастью, EZNGRX позволяет нам сделать это очень легко, и самое приятное то, что вам не нужно писать ни одного эффекта, чтобы это произошло. Этот учебник начинается с того места, где остановился предыдущий, используя тот же исходный код.

Создать и настроить приложение

В командной строке запустите

ng new ezngrx-todo && cd ezngrx-todo

Когда появятся подсказки, выберите «Да» для маршрутизации Angular и выберите предпочтительный формат стиля.

Когда установка завершится, вы должны оказаться в корневом каталоге приложения. Теперь нам нужно добавить в проект все необходимые пакеты NGRX, которые требуются EZNGRX для работы, поэтому выполните следующее:

npm i @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store @ngrx/store-devtools ngrx-store-logger ngrx-store-localstorage @angular/flex-layout @angular/cdk @angular/material --save

Как только они закончат, теперь добавьте EZNGRX в проект, используя следующую команду:

npm i @woahn/ezngrx --save

Теперь вы сможете запустить проект, используя

ng serve

Перейдите к http://localhost:4200/, и вы должны увидеть что-то вроде этого (за исключением имени вашего приложения, где написано работает):

Настройте REST-сервер

Далее нам нужно создать серверную службу, которая может эмулировать REST API. Не стесняйтесь обращаться с этим как хотите, но, на мой взгляд, проще всего будет использовать библиотеку json-server. Мы можем получить всю необходимую функциональность примерно за 30 секунд. Сначала установите пакет.

npm install -g json-server

После установки создайте файл с именем db.json в корне папки проекта и заполните его следующим содержимым.

{
  "todo": []
}

Затем запустите сервер JSON

json-server --watch db.json

Это должно быть все, что нужно, чтобы начать работу, и вы можете проверить это, перейдя к

http://localhost:3000/todos

Вы не увидите многого, просто {} в верхнем углу вашего браузера, и он не выдаст ошибку.

Создайте службу данных

Откройте app.module.ts, чтобы добавить интерфейс Todo, чтобы он выглядел следующим образом:

Далее мы будем использовать Angular CLI для создания службы. Запустите следующее в терминале

ng g s todo-data

Откройте только что созданный новый файл todo-data.service.ts и измените его, чтобы он выглядел следующим образом:

Первое, что мы делаем здесь, это расширяем DefaultDataService и передаем интерфейс Todo. DefaultDataService — это то, что EZNGRX использует по умолчанию во всех стандартных действиях для всех сущностей. Создавая эту пользовательскую службу данных, мы собираемся заменить эту службу, но на самом деле нам может не понадобиться использовать все стандартные методы в файле DefaultDataService. Поэтому вместо этого мы расширяем его, и это позволяет нам писать собственные методы только для того действия, которое мы собираемся использовать. Остальные по умолчанию будут выполнять действия DefaultDataService.

Нам также необходимо определить, к какой сущности применяется эта служба данных, поэтому мы добавляем свойство entity и присваиваем ему то же значение, что и нашей сущности, Todo.

В прошлом уроке мы использовали два простых действия, addOne и removeOne. Мы собираемся создать только методы службы данных для обработки этих двух функций. Методы службы данных отражают действия, но просто добавляют entity или entities в конец.

load — это функция инициализации, которую мы вызовем и которая будет считывать все Todos с сервера при первой загрузке нашего приложения, чтобы убедиться, что наше локальное хранилище отражает то, что находится на сервере.

addOneEntity довольно просто. Мы используем Angular HttpClient, который возвращает Observable. Мы передаем интерфейс Todo, чтобы определить, какой тип объекта мы можем ожидать получить взамен.

Метод removeOneEntity немного отличается. Единственное, что он передает, это ключ объекта, который вы хотите удалить. Однако HttpClient возвращает что-то другое, и Dynamic NGRX ожидает, что вы отправите ему ключ удаляемой сущности. Поэтому, когда мы получаем ответ от HttpClient, мы сопоставляем его, чтобы вернуть исходный ключ, который был передан.

Это все, что нам нужно сделать, чтобы наш сервис данных заработал. Хотя мы просто используем json-server, вы можете видеть, как легко было бы подключиться к любому API. Кроме того, если вам нужно добавить другую логику или сопоставление данных, эта служба данных является точкой входа для вставки этой логики.

Обновите динамическую конфигурацию NGRX

В прошлый раз мы поместили конфиг для EZNGRX в файл app.module.ts, но мы собираемся его нарастить, так что давайте вынесем его в отдельный файл. Создайте новый файл с именем ezngrx.config.ts и обновите его, чтобы он выглядел следующим образом.

Мы определяем службу данных как мультипровайдера, который будет импортирован модулем EZNGRX. Мы даем ему токен инъекции DYNAMIC_DATA_PROVIDER, чтобы EZNGRX мог найти всех соответствующих поставщиков данных и назначить правильного, когда это необходимо.

Мы также включили ведение журнала с параметром enableLogging. Теперь, когда мы заглянем в консоль разработчика в браузере, мы сможем увидеть полезную нагрузку для всех отправленных действий NGRX и убедиться, что локальное состояние изменяется правильно.

Кроме того, быстро проверьте файл app.module.ts и убедитесь, что у вас правильно настроен импорт.

Создайте компонент

Обновите файл app.component.ts, чтобы он выглядел следующим образом:

И, наконец, последнее, что нам нужно сделать, это быстро изменить app.component.ts для обработки необходимых действий. Ознакомьтесь с первой статьей, которую я написал на эту тему, чтобы узнать подробности о том, что здесь происходит.

Действие load вызовет метод загрузки, который мы написали в todo-data.service.ts. Действие принимает два параметра. Первый — это запрос, в котором вы можете определить данные, которые вы хотите загрузить методом загрузки. Так что, возможно, вам нужны только задачи, созданные конкретным человеком, вы хотите, чтобы он загружал последние 10 созданных или какие-то другие параметры поиска. В данном случае мы просто передаем undefined, так как нет конкретного запроса, который мы хотим выполнить.

Второй параметр, который он принимает, — это логическое значение, указывающее, следует ли принудительно загружать данные. По умолчанию функция загрузки проверяет, были ли объекты уже загружены с сервера. Если они были загружены, он не запрашивает данные снова. Однако, если вы установите для второго параметра значение true, это заставит функцию загрузки загрузить запрос с сервера, а затем заменить все данные в NGRX Store.

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

Дайте мне знать, что вы хотели бы видеть дальше в комментариях.