В моей предыдущей статье, логика повторного использования редуктора ngrx / store, я писал о повторном использовании логики редуктора в вашем приложении angular. В этой статье мы сделаем еще один шаг, добавив асинхронные вызовы в API. Мы делаем это с помощью библиотеки ngrx / effects. Я предполагаю, что у вас уже есть некоторые практические знания об эффектах. Если вы не знаете, что такое эффекты, рекомендую прочитать эту статью.
В моей предыдущей статье мы настроили многоразовое хранилище для нескольких страниц, каждая из которых отображает список пользователей. На этих страницах мы могли выбирать и сортировать пользователей. Если мы предполагаем, что каждое действие (например, выбор, сортировка или выборка) требует вызова API, нам нужны три эффекта, которые получают данные из API и затем отправляют действие complete с новыми данными. Эти данные затем используются для настройки нашего нового состояния.
Настройка наших действий
Прежде чем мы настроим наши действия, я хотел бы определить функцию, которая гарантирует уникальность каждого действия. Это предотвращает отправку любых двойных действий в будущем:
Тогда пора определиться с нашими действиями. Давайте сначала настроим все действия для роли администратора:
Затем мы определяем действия для нашей роли редактора:
Для обеих ролей мы сначала определяем все возможные actionTypes, затем создаем класс, который реализует действие для каждой из них, и, наконец, мы экспортируем каждый отдельный класс. Вы могли заметить, что мы определяем complete действия. Действия complete будут отправлены в результате наших запросов API. Каждый запрос инициируется с помощью действия non-complete. Подробнее об этом при настройке наших эффектов.
Если вы раньше не читали об этом шаблоне многоразового редуктора, я рекомендую вам прочитать мою предыдущую статью.
В нашем редукторе мы определяем только те действия, которые возвращают новое состояние. В данном случае это означает, что нам нужно только определить действия complete. Действие sort является исключением из этого правила, так как я думаю, что также полезно сохранять текущее состояние сортировки. Теперь, когда мы настроили наши действия и редуктор, давайте настроим наши вызовы API.
Настройка наших вызовов API
Поскольку здесь мы имеем дело с асинхронными запросами, давайте теперь определим наши вызовы API. Для того, чтобы этот шаблон многократного использования работал, важно называть ваши вызовы action + role (in plural). Например, fetchAdministrators() будет именем функции, вызывающей администраторов. Различные вызовы API могут выглядеть так:
Каждая функция возвращает наблюдаемое с ответом в формате JSON. Мы будем вызывать эти функции из наших эффектов.
Настройка наших эффектов
Нам нужен эффект для каждого действия, требующего вызова API. В данном случае это означает, что нам нужен эффект для fetch, select и sort. Давайте сначала настроим их для администратора. Эти эффекты могут выглядеть так:
Для каждого Эффекта мы перечисляем действие с помощью ofType, затем map полезную нагрузку отправленного действия с помощью toPayload. После этого мы используем оператор switchMap, чтобы получить полезную нагрузку и передать ее в качестве параметра функциям API. Если вызов API возвращает значение, мы отправляем complete действие с этим значением. Если вызов API не возвращает значение, мы отправляем действие complete с пустым массивом. Если при выполнении запроса что-то пошло не так, есть перехватчик, который также отправляет пустое действие complete.
Пока ничего особенного. Но прямо сейчас нам нужно сделать то же самое для нашей роли редактора. На самом деле это не СУХОЕ - копировать все функции эффектов и заменять administrator имена на editor имена. Вот и весь трюк: мы можем обернуть эффекты в функции, которые возвращают внутреннюю логику эффекта. Это может выглядеть так:
Сначала нам требуются действия для каждой роли и мы сохраняем их в свойстве. Затем мы создаем функции с логикой эффекта. В этих функциях мы заполняем все переданные действия и ролевые переменные. Наконец, мы настраиваем фактические эффекты, вызывая только определенные функции и передавая действия и роль. Имя роли должно соответствовать тому, как вы назвали свои функции вызова API. Мы назвали функции action + role, если вы не хотите это менять. Без проблем! Просто не забудьте также изменить вызов функции в своей логике эффекта.
Заключение
Используя этот шаблон, мы можем повторно использовать логику эффектов для всех эффектов, которые, по сути, делают то же самое, но для разных сущностей. Этот шаблон гарантирует, что ваш код останется СУХИМ и, следовательно, более удобным в обслуживании.
Спасибо за прочтение. Есть отзывы? Дайте мне знать.
Следуйте за мной на Medium, и давайте подключимся к LinkedIn
