В мире Angular и управления состоянием NgRx — бесспорно мощная библиотека, получившая популярность благодаря своей способности управлять состоянием предсказуемым и поддерживаемым образом. Однако разработчикам также может быть сложно понять его тонкости, особенно когда речь идет об использовании селекторов. В этом посте мы обсудим важность использования семантически правильных имен для селекторов NgRx, таких как isLoaded, getUserName и hasChild, и то, как это может значительно улучшить читабельность и удобство сопровождения вашего кода.

Сила семантически правильных имен селекторов

Когда вы имеете дело с управлением состоянием, очень важно сделать ваш код простым для понимания как для вас, так и для других разработчиков, которые могут работать над одним и тем же проектом. Один из лучших способов добиться этого — использовать осмысленные имена для ваших селекторов NgRx.

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

загружено

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

export const isLoaded = createSelector(
  getSomeFeatureState,
  (state: SomeFeatureState) => state.loaded
);

получитьИмяПользователя

При выборе данных из дерева состояний полезно быть как можно более явным. Селектор getUserName — отличный пример этого, так как он точно описывает, какие данные он извлекает — имя пользователя.

export const getUserName = createSelector(
  getUserState,
  (state: UserState) => state.userName
);

хэш

В тех случаях, когда вам нужно определить наличие определенного дочернего элемента в коллекции, использование селектора hasChild делает намерение понятным.

export const hasChild = createSelector(
  getChildrenState,
  (state: ChildrenState, props: { childId: number }) =>
    state.children.some(child => child.id === props.childId)
);

Преимущества семантически правильных имен селекторов

Используя селекторы с семантически правильными именами, вы получаете несколько преимуществ:

  1. Удобочитаемость: цель селектора сразу становится очевидной для любого, кто читает код. Это облегчает понимание потока данных и того, как они используются в приложении.
  2. Ремонтопригодность: по мере того, как ваше приложение становится все более сложным, становится все более важным иметь чистый, удобный для сопровождения код. Селекторы с понятными описательными именами облегчают разработчикам поддержку и рефакторинг кодовой базы.
  3. Снижение когнитивной нагрузки: при работе со сложным приложением нужно многое отслеживать. Семантически правильные имена селекторов уменьшают умственные усилия, необходимые для понимания кода, позволяя разработчикам сосредоточиться на логике приложения.

Заключение

Использование семантически правильных имен для селекторов NgRx — относительно простая практика, которая может значительно улучшить читабельность и удобство сопровождения вашего приложения. Убедившись, что ваши селекторы имеют описательные имена, такие как isLoaded, getUserName и hasChild, вы создаете кодовую базу, которую легче понять, поддерживать и расширять. Это, в свою очередь, делает ваше приложение более надежным и эффективным, а также позволяет уделять больше времени обеспечению исключительного пользовательского опыта.