Большинство приложений, которые я создаю на Angular, довольно маленькие, мы создаем множество небольших интерфейсных приложений вместо нескольких более крупных. Исторически сложилось так, что моя команда и я всегда просто полагались на стандартный способ ввода / вывода Angular взаимодействия компонентов, который работал хорошо большую часть времени, но мог приводить к периодической чрезмерной передаче между соседними компонентами. Мы изучили NgRx и другие реализации потока, но они чувствовали себя немного излишними для размера наших приложений. Недавно мы обнаружили решение для наших потребностей в управлении состоянием - Тема поведения RxJS!
Субъекты поведения аналогичны обычным субъектам в RxJS, за исключением того, что они сохраняют «текущее значение», позволяя наблюдателям просматривать значение, даже если оно было в последний раз обновлено перед подпиской. Подобно темам, они позволяют «многоадресную рассылку» или одновременное обновление всех слушателей. Это означает, что вы можете хранить свой объект поведения в месте, доступном для нескольких компонентов, таких как служба, а затем подписаться на него в нескольких компонентах, и все они будут получать обновления по мере их появления, независимо от положения этих компонентов в иерархия - это супер аккуратно!
В этом блоге будет показано простое приложение-счетчик, которое я создал, чтобы показать, как работают субъекты поведения: вы можете просмотреть исходный код на Github, нажав здесь.
Пример приложения представляет собой простой счетчик с кнопками для увеличения, уменьшения и сброса счетчика обратно на 0. Существует многоразовый компонент, который прослушивает объект поведения - дважды! Оба экземпляра компонента будут обновляться одновременно каждый раз, когда происходит изменение текущего значения, хранящегося в субъекте поведения. Давайте посмотрим, как это работает.
В сервисе так создается субъект поведения. Я использую интерфейс под названием Count, чтобы обеспечить приемлемую для субъекта поведения структуру объекта. initalCount - это то, каким должно быть начальное значение счетчика (это также используется при сбросе). Строка 11 - это место, где создается новый объект поведения с 0 в качестве первого значения.
Я разработал три метода взаимодействия с субъектом поведения. Во-первых, это getCount(), который позволяет компоненту получать и подписываться (прослушивать) субъект поведения. Затем setCount() позволяет предоставить субъекту поведения новое текущее значение, перезаписывая старое значение в процессе. Для этого требуется текущее значение и дельта или изменение значения, чтобы можно было вычислить новое значение. Наконец, resetCount() повторно использует эту переменную initialCount, которая снова сбрасывает счетчик на {value: 0}. Давайте посмотрим на эти методы в действии.
Выше находится компонент с кнопками, которые управляют обновлением темы поведения. Функции увеличения, уменьшения и сброса вызываются при нажатии соответствующих кнопок. Когда компонент инициализируется в ngOnInit, он подписывает субъект поведения, чтобы получить доступ к текущему значению, которое необходимо для его изменения. Теперь давайте посмотрим на компоненты наблюдателя.
Вот компонент, отображающий текущее значение предмета поведения. Этот компонент создается дважды, чтобы иметь двух уникальных одновременных слушателей. Они не изменяют субъект поведения, как предыдущий компонент, а только пассивно подписываются на получение обновлений. В этом простом примере это не особенно впечатляет, но представьте, что это был повторно используемый компонент, который был встроен в очень разные части иерархии приложения, но всегда нуждался в этой информации. Это значительно упрощает предоставление компоненту требуемых данных вместо передачи данных от родительских компонентов!
Если вы console.log субъект поведения, вы действительно можете увидеть что-то действительно интересное - проверьте свойство наблюдателей - мы видим 3! Один для первого компонента, который изменяет поведение субъекта, и еще два для компонентов, только прослушивающих. Сам субъект поведения отслеживает это, что и полезно, и увлекательно. Также можно увидеть текущее значение и данные, относящиеся к состоянию наблюдаемого.
Я надеюсь, что этот пример помог кому-то понять силу и простоту работы с объектами поведения. Если у вас есть вопросы или идеи, как их можно использовать, оставьте их в комментариях!
