Хорошие разработчики ленивы
В настоящее время мы, разработчики, настолько ленивы, что программирование становится утомительным и утомительным, но что, если есть способ уменьшить боль? Готов поспорить, что у вас есть «надстрочный индекс», который может делать все, что нужно, пока вы выполняете другую работу.
Сегодня я поделюсь своим опытом использования Angular Schematics в сочетании с NgRx Schematics и коснусь некоторых тем NgRx, таких как Store, Entity и Effects.
Что такое схемы?
Схемы - это простые команды для более быстрой генерации различных частей исходного кода с использованием определенного шаблона.
- Например: Создать компоненты -
ng generate component user-list
. - E.g.:
ng generate module user
.
Выше вы видите самые простые схемы Angular. Дополнительные параметры и подробности можно найти в Angular CLI.
Почему схемы хороши?
Фреймворк Angular имеет строгие правила (MVC), поэтому нет смысла переоценивать структуру. Здесь полезны схемы - они делают почти то же самое, что и разработчики; писать код, но быстрее.
Если разработчик достаточно хорошо знает интерфейс командной строки и использует его для ввода кода, он довольно быстро завершит настройку нового проекта и использует оставшееся время для более сложных вещей.
Основное приложение
Я представлю простое приложение, которое будет иметь функции создания, чтения и удаления с использованием NgRx и которое в основном было создано с использованием схем Angular / NgRx.
Я должен упомянуть, что это приложение было создано очень быстро и предназначалось для демонстрации того, насколько легко создать простой CRUD с меньшими усилиями.
Почему NgRx?
- Это удобно.
- Это заставляет вас строить читаемую структуру.
- У него есть схемы, которые сгенерируют за вас 70% кода.
Пользовательский код записан в следующих файлах:
Услуга
Эффекты
Компонент списка пользователей
Что более важно, NgRx предлагает использовать @ ngrx / entity для операций CRUD.
Он имеет множество функций, которые помогают избавиться от повторения одного и того же кода снова и снова. Управление состоянием становится проще, а диспетчерские вызовы становятся удобочитаемыми, потому что они делают именно то, что говорят их имена.
Что заставляет их работать должным образом?
Есть @ngrx/effects
и HttpServices
.
Они фиксируют действия и выполняют @ngrx/entity
сгенерированные действия. Простой процесс, которому нужно следовать каждый раз, когда вы создаете CRUD для объекта, и все.
Но имейте в виду, что необязательно использовать сущность для каждой части вашей функциональности. В общем, все дело в том, как написан редуктор. Вы можете полностью игнорировать стиль сущности и написать простой редуктор, используя Действия, Эффекты и Пользовательский редуктор.
Поток
Создание действий
ng generate @ngrx/schematics:action users/Users — group
Создать редуктор
ng generate @ngrx/schematics: reducer users/User — group
Создание вызовов HTTP
Это нужно делать на заказ. См. Пример выше.
Создание эффектов
ng generate @ngrx/schematics:effect users/Users -m users/users.module.ts — group
Создайте селекторы
Всегда проверяйте, нужен ли вам пользовательский селектор, но я предлагаю всегда создавать пользовательские селекторы, унаследованные от базовых селекторов.
Используйте селекторы
Действия отправки
См. Пример выше. Ниже показано добавление пользователя.
Подключить представление (интегрировать полученные данные в шаблон)
Резюме
За несколько шагов вы можете получить полный функциональный модуль, выполняющий основные операции CRUD.
Я на 100% уверен, что расширенная настройка не вызовет проблем. Используйте схемы, быстро создавайте и разрабатывайте отличные приложения с меньшими усилиями, потому что вокруг так много полезных инструментов, но многие из них остаются неиспользованными.
Хотите копнуть глубже? "Дайте нам знать".
Первоначально опубликовано на Inveritasoft.com 17 марта 2020 г.