Сегодня я узнал, что есть на свете такая штука 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; |
Так что таким минимальным кодом можно добиться передачи информации от одного компонента к другому.
· Permalink
Мощная штука, особенно полезная при обработке запросов через операторы, например, map, switchMap или mergeMap.
Последний крут тем, что можно результаты одного запроса объединить на лету с результатами другого запроса.
Что хорошо, так это операторы rxjs уже имеют в себе логику автоматической отписки от события.
https://metanit.com/web/angular2/6.2.php
https://wezom.com.ua/blog/reaktivnoe-programmirovanie-s-rxjs-i-angular