Очень интересно видеть, как ngrx предоставляет различные состояния для управления состоянием в приложении.

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

В компонентах Angular мы обычно используем императивные способы, используя локальные переменные компонента для хранения состояния и имея набор подписок для установки этих переменных при испускании наблюдаемых объектов (как показано на снимке экрана ниже).

Однако ComponentState помогает нам действовать по-другому — реактивность. Теперь вы можете подключить эффект ComponentStore к нажатию кнопки, так как Effect принимает наблюдаемое или объектное значение, создает наблюдаемое и начинает излучать значение в наблюдаемом потоке — возможно, вы используете локальный субъект, чтобы начать реактивно излучать значение — Это лучше, чем делать императивно, вызывая функцию, или даже лучше использовать ComponentState.

Более того, если вы создаете ComponentStore на уровне родительского компонента, вы можете использовать тот же Store для внедрения в дочерние компоненты, и это сделает связь между родительскими и дочерними компонентами довольно простой — эту связь вы можете выполнять с помощью службы. Это переместит вашу бизнес-логику в общее место.

Селекторы в ComponentStore похожи на селекторы ngrx — дают вам срез состояния в Store.

Метод обновления в ComponentStore асинхронно обновляет новое состояние — как чистую функцию. Вы можете подключить эффект к селектору, чтобы реагировать на изменение состояния в хранилище, а не принудительно подписываться на компонент, а затем вызывать эффект.

Для более подробной работы с базовым классом ComponentStore вы можете проверить — Angular Component Store — мощный и простой