RXJS — это библиотека Javascript для реактивного программирования. Он обеспечивает реактивный способ работы с вашими данными с помощью Observables. В этом посте я объясню это, используя аналогию с шариками (и я постараюсь не потерять их в процессе ;))

Наблюдаемые

Наблюдаемые — это основа RXJS, их можно наблюдать, и это делает код реактивным, вы реагируете на изменения данных. Ну, вот аналогия:
Observable похож на мраморную машину, он выдает все шарики (данные), которые у него есть, по порядку и один за другим, пока он не станет пустым.

Предметы

В примере Observable (мраморная машина) создается и подписывается (наблюдается). Недостатком является то, что если машина пуста, ее нельзя пополнить, и она полезна только для одного наблюдателя. Вот тут-то и появляются субъекты RXJS. Субъекты — это особый тип наблюдаемых, они могут делиться испускаемыми данными между несколькими наблюдателями и позволяют передавать данные всем наблюдателям. В нашей аналогии: у мраморной машины есть загрузчик мрамора, и все выходящие шарики будут клонированы и переданы всем наблюдателям.

Трубы/Операторы

Что, если вы хотите подсчитать количество красных шариков, которые выбрасывает машина? Конечно, вы можете собрать все шарики и посчитать красные, но это можно сделать лучше. Что RXJS позволяет вам сделать, так это создать канал от Observable к оператору. На языке шариков: вы можете подключить трубы к машине, чтобы перенаправить все шарики на маленькие машины (операторы), которые могут что-то делать. Итак, если Пит хочет что-то сделать с красными шариками, а Анна с зелеными, вы получите следующий пример.

Операторы генерируют новый Observable, чтобы вы могли передавать их другому оператору и т. д. и т. д.

Что делать дальше

Играть с этим! Посмотрите на операторы, доступные для RXJS, и попробуйте объединить их, чтобы создать полезные Observables! Или поиграй с шариками, это всегда весело ;)

Зачем использовать RXJS

RXJS — отличный способ получить контроль над потоком данных в вашем приложении Javascript. Лично я использую его практически для каждого проекта Javascript, в основном в сочетании с Angular, который сам также использует RXJS.

Я хочу больше!

Я планирую продолжить, если этот пост будет достаточно популярен, используя аналогию с шариками для более продвинутых примеров RXJS.

Первоначально опубликовано на https://dev.to 24 марта 2021 г.