Skip to content

Almat.su

Блог Алмата Жандаулетова

  • Главная
  • Контакты
subject-rx-js

Observable Subject — обезжиренный NgRx?

Автор Zhandauletov Almat · 8 августа, 2020 ·
Просмотры: 566

Сегодня я узнал, что есть на свете такая штука Subject RxJs.

Хоть я и читал ранее об этом, но не мог понять для чего это может понадобиться. В документации есть сухое научное описание, что типа мол это мультикаст Observable, вот пара абстрактных примеров с примитивами, далее разберетесь. Прошелся беглым взглядом, повесил ярлык «какой то редкий зверь» и явление это забылось.

Давеча понадобилось мне обновить страницу в Angular в зависимости от результата операции в фоне.

Вроде бы и выход ясен — использовать NgRx для передачи/изменения состояния, но сама архитектура NgRx претить правилам KISS, так что я задался вопросом «А есть ли более легкий способ?».

Поиски по всемирной паутине привели к случайному ответу на stackoverflow, где был показан пример работы с Subject RxJs. «Неужели это оно?» — воскликнул я и дальнейшее погружение в тему все более обнадеживало.

В изучении материала помогли:

  • Материал о RxJS: все о Subjects, Behavior Subjects и Replay Subjects
  • Официальная документация
Что же такое Subject RxJs?

Тут https://www.learnrxjs.io/learn-rxjs/subjects приводится более яркая аналогия, чем в сухое описание в официальной документации.

You can think of this as a single speaker talking at a microphone in a room full of people. Their message (the subject) is being delivered to many (multicast) people (the observers) at once. This is the basis of multicasting. Typical observables would be comparable to a 1 on 1 conversation.

От себя, хотелось бы добавить еще одну аналогию. Когда у Васи есть рация и он может вещать всем, кто подключился к его частоте, но также и Вася может принимать сигналы с этой частоты.

Пример

Написал небольшой пример, проверить и запустить можно по ссылке: https://stackblitz.com/edit/angular-subject-example-mini-ngrx?file=src%2Fapp%2Fapp.component.ts

MyService хранить в себе состояние, а также метод меняющий его. В терминологии NgRx это был бы state and reducer в одном лице.

Есть третье лицо — RefreshButton — который запускает процесс изменения состояния. В терминологии NgRx это был бы dispatch and action в одном лице.

AppComponent через посредника RefreshButton запускает обновление информации, также он подписан на получение информации в случае обновления

1
2
3
 
myAsyncProperty$ = this.mySrv.mySubject;
 

Так что таким минимальным кодом можно добиться передачи информации от одного компонента к другому.

Frontend · Angular, NgRx, RsJs, Subject RxJs

Поделиться в сети!

Что об этом думаете? Напишите в комментарии. Можно написать как гость

Copyright © 2016 - 2023 Almat.su.