Хорошие разработчики ленивы

В настоящее время мы, разработчики, настолько ленивы, что программирование становится утомительным и утомительным, но что, если есть способ уменьшить боль? Готов поспорить, что у вас есть «надстрочный индекс», который может делать все, что нужно, пока вы выполняете другую работу.

Сегодня я поделюсь своим опытом использования 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 г.