Независимо от того, хранятся ли данные в активах или во внутренней базе данных, вам все равно нужно знать, как правильно управлять потоком данных во внешнем интерфейсе. Не пугайтесь. Здесь мы рассмотрим вид высокого уровня.

Во-первых, я хочу упомянуть, что NgRx и NgX — это фреймворки, которые представляют очень похожие идеи для управления данными и могут быть довольно легко заменены друг другом, если ваше приложение не слишком велико, когда вы это делаете. В основном я буду говорить о NgRx (Redux), а затем упомяну, чем отличается NgXs. NgRx — самый популярный из двух, но NgX можно использовать с такими библиотеками, как StorybookJS, и обычно он проще.

Как это работает?

Redux может отвечать за управление состоянием в проекте Angular. Состояние — это, по сути, данные, которые в данный момент присоединены к текущим процессам. Например, если мы входим в систему, то состояние может содержать имя пользователя, на которое мы можем ссылаться через state.login.username или что-то подобное. К сожалению, это сложнее, чем кажется, а не наоборот, но на то есть веская причина.

Существует три основных типа компонентов, используемых для управления этим так называемым состоянием: действия, редьюсеры и эффекты (см. диаграмму). Сервисы здесь также важны, учитывая, что нам понадобятся данные в какой-то момент процесса (сервисы в данном случае — это вызовы серверной части). Каждый тип можно рассматривать как простой объект/метод в файле. Таким образом, внутри файла action.ts будет несколько действий. Код выглядит следующим образом (пример описания следует за этими снимками экрана):

Давайте рассмотрим пример процесса.

  1. Ваш компонент должен что-то делать, например, назначать человека из списка задаче. Для этого он вызывает действие. Он отправит статический вызов, такой как TaskActions.assignPerson({data}). Часто требуется передача переменных (в нашем случае мы передаем их в одном объекте).
  2. Это действие будет иметь некоторую информацию, такую ​​как строка с надписью «Назначение человека для задачи», которую может использовать отладчик. Когда действие вызывается эффектом или/и редюсером, он может прослушиваться.
  3. Если есть метод эффекта, прослушивающий его, запускается больше вещей:
    Во-первых, эффект извлекает свойства действия, такие как «данные», и передает их в соответствующую службу. Например, TaskServices.assignPerson(action.data).
    Это вернет данные (если необходимо) и передаст их другому вызываемому действию. Например, TaskActions.assignedPerson(backEndData.thingIWant). Он делает это в стиле хип-хопа, но после того, как вы посмотрите на него 10 раз, все станет понятно.
    Наконец, будет шанс, что это вернет ошибку, и, следовательно, есть вероятность ошибки. действие, которое должно быть вызвано в ответ на это, чтобы нести ошибку (для уменьшенного изменения состояния ошибки).
  4. Обычно редюсер запускается при вызове второго действия с внутренними данными. Этот редьюсер сможет использовать свойства этого действия для изменения состояния. Состояние изменяется только здесь, и к нему можно получить доступ с помощью селекторов (посещено позже). В редьюсере мы возьмем текущее состояние и сделаем из него новое состояние, используя новые данные из бэкенда. Например, newState.activationSpecificState.successAssigning = true.
  5. Это новое состояние возвращается внутрь хранилища, где его можно использовать.

Чем отличается NgX?

NgXs не использует эффекты и редукторы. Он объединяет их в действия. Обратной стороной является просто больше кода в ваших действиях, и больше кода в каждом файле, что затрудняет поиск старого кода. Положительным моментом является меньшее количество файлов для управления. Я думаю, что документация для обеих платформ в порядке, но будет больше поддержки NgRx на веб-сайтах, таких как stackoverflow.

Если вам нужна дополнительная информация о том, как их на самом деле настроить, просто посетите их веб-сайты. Они довольно чистые, и им легко следовать.

NgRx: https://ngrx.io/

NgXs: https://www.ngxs.io/

Спасибо за чтение.