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

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

1. Определение типа действия: предпочитать перечисление константам

Enum ускоряет мой рабочий процесс программирования в WebStorm по сравнению с использованием констант. С помощью WebStorm я могу генерировать операторы case на лету. Если вы добавили новые записи Enum, WebStorm позволит вам сгенерировать отсутствующие операторы case.

2. Именование действия: предпочитать совпадение имени действия с записью перечисления.

Именование ваших действий не имеет значения в WebStorm. WebStorm может динамически определять тип действия, когда вы используете оператор switch case.

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

3. Предпочтите групповые действия для редуктора.

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

Обратите внимание, что я оставил точку с запятой на новой строке. Я делаю это, чтобы ускорить добавление новой записи - нажмите CMD + D, чтобы продублировать строку и скопировать вставку.

4. Используйте пространство имен TS для группировки действий.

Наконец, по мере роста вашего проекта часто используется одно и то же действие, но с другим префиксом. Например, FormSubmitted - допустимое имя действия для любой части приложения, которая имеет дело с отправкой форм. Концептуально я хочу использовать это следующим образом:

this.store$.dispatch(new fromOnboardingActions.FormSubmittted())

Таким образом, будет ясно действие и источник отправляемого действия.

Рекомендуемый подход - импортировать * как fromActions. Однако использование этого подхода требует, чтобы я писал операторы импорта вручную. В WebStorm есть невероятная функция автоматического импорта, и не использовать ее - пустая трата времени.

Следующий вариант - сгруппировать создателей действий таким образом.

Сделав это, мы можем начать вводить ключевое слово fromActions, и WebStorm сможет найти нужный файл для импорта. Хотя это решает проблему автоматического импорта, в эффектах возникает проблема приведения типов.

К счастью, мы можем воспользоваться ключевым словом пространства имен TypeScript. Хотя TS не рекомендует это делать, я чувствую, что этот вариант использования определяет использование пространства имен.

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

Https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html

Дополнительным преимуществом пространства имен является то, что оно позволяет разделить действия по множеству файлов, если файл становится длинным.

Вывод

Эти четыре небольших изменения сильно повлияли на мою продуктивность. Попробуйте и дайте мне знать, что вы думаете.