Часть 2: Оператор создания RxJS

Операторы RxJS

Одна из величайших особенностей RxJS - это его богатые и мощные операторы. Это методы / функции, которые не изменяют существующий поток, но возвращают новый. Другими словами, оператор - это чистая функция, в которой входом является наблюдаемый, а выходом - другой наблюдаемый.

Понятие и реализация чистых функций с конкретными, явными вводом, выводом и неизменяемостью охватывают принципы функционального программирования. . Этот декларативный стиль значительно снижает побочные эффекты и улучшает читаемость кода. Первая часть этой серии прояснила их очень подробно 🕵 ️‍🤗

Операторы создания

Операторы RxJS сгруппированы по их отличительным целям. Его категории включают: creation, transformation, filtering, combination и т. Д.

В программе RxJS первая и самая важная фаза - это создать поток. RxJS рассматривает каждый источник данных как поток. Следовательно, его операторы создания позволяют нам создавать поток данных практически из всего. Они включают в себя простые события DOM, такие как нажатия кнопок, нажатия клавиш для ввода более сложных источников данных, таких как обещания.

В этом блоге я хотел бы представить первые четыре основных оператора создания RxJS: create, from, fromEvent, of и, что более важно, их реальное использование. А теперь давайте возьмем чашку кофе ☕️ и нырнем в нее 🕵 ️‍

Create operator

create - это низкоуровневый machenisim, позволяющий нам создавать любые Observable. Это самый общий и, следовательно, мощный из операторов создания, в которые мы сегодня углубимся.

Источник данных

create не принимает значения в качестве источника данных, а получает список событий, называемый подписками на функции. Эти функции будут указывать, как значения передаются наблюдателю.

import { Observable } from 'rxjs'

const observable = Observable.create(subscriptionFn)

create по сути дает вам полный контроль над источником данных. Но как? 🤔

Взглянув на официальную документацию, мы увидели, что create принимает параметр - функцию onSubscription. Эта функция принимает наблюдателя и явно использует next, complete и error для выдачи значения, завершения и выдачи ошибки соответственно, когда наблюдатель подписывается на это.

Давайте посмотрим, как create управляет потоком источника данных в действии:

В приведенном выше примере мы передаем наблюдателям только нечетные числа. Благодаря функции next каждое значение, соответствующее нашему условию, распределяется. В противном случае метод error выдает ошибку. В конце концов, мы вызываем complete, чтобы уведомить наблюдателей о том, что наблюдаемый объект закончил излучение и процесс завершен.

Обратите внимание, что после вызова complete или error наблюдаемый перестанет излучать и больше ничего не будет делать. Это прекращение называется Наблюдаемый контракт.

Очистка перед отказом от подписки

Параметр onSubscription оператора create может опционально работать return. Используя это, мы могли бы очистить ресурсы перед тем, как отказаться от подписки на исходный наблюдаемый объект.

Вам действительно нужен create?

В большинстве случаев ответ - нет!

Есть и другие операторы создания, которые мы рассмотрим и увидим, насколько они мощные и гибкие. Кроме того, RxJS также имеет широкий спектр других операторов для фильтрации, преобразования, обработки ошибок и т. Д. Следовательно, create необходим только тогда, когда вам действительно нужен такой уровень контроля над источником данных наблюдаемого.

От оператора

Оператор from превращает массив, обещание или итерацию в наблюдаемое (поток). Ближайшим реальным сценарием было бы создание Observable из Promise. Создадим поток из getCakes Promise через Fetch API:

Теперь вы можете задаться вопросом: Это так просто? Ну да, но нет 🤗.

Дай мне понять это прямо. Это просто, если вы перейдете к модели, основанной на данных. Это означает, что ваша программа на самом деле не заботится о том, где и как fetchCakesPromise вызывается / выполняется. Все, на что он обращает внимание, - это то, что через него проходит поток пирожных, и ему необходимо распределить каждое значение, которое излучает поток, своим подписчикам. Как только его наблюдатель - подписчик получил необходимые данные, миссия завершена!

fromEvent оператор

fromEvent создает Observable из событий. Одна из самых простых реализаций fromEvent - создать поток clicks событий мыши. Посмотрим на это в действии 🖱🐭

Вы можете легко заметить, что fromEvent принимает первый аргумент как кнопку отправки узла DOM. Второй аргумент - это, по сути, имя события, которое в нашем случае click.

Из этого простого примера трудно понять, зачем нам нужен RxJS для обработки этого простого click события. Однако все становится еще интереснее, если мы не останавливаемся на обработчике одной операции.

В RxJS, независимо от простого или сложного потока, мы всегда рассматриваем источник данных как поток. fromEvent - это своего рода шлюз для преобразования чистых событий DOM в поток. Только после этого мы могли использовать другие мощные операторы RxJS для изменения и обработки логики в потоке.

оператора

of преобразует список значений в наблюдаемую последовательность. Значения в качестве аргументов могут быть последовательностью чисел, объектом или массивом. На этом этапе вы можете найти off странно похожим на from. Давайте выясним разницу между ними 🕵️‍♂️

Вам не потребовалось много времени, чтобы заметить разницу, не так ли? Мы могли видеть, что of не выравнивает исходный текст. Таким образом, он выдает сразу все значение numberArray. С другой стороны, from выполняет выравнивание источника массива перед выдачей значений. Поэтому он распределяет каждое значение из numberArray одно за другим.

Ключевые выводы

  • create - это низкоуровневая наблюдаемая фабрика, которая дает полный контроль над тем, как значения передаются наблюдателям.
  • create перебивает во многих ситуациях. Так что стоит учесть стоимость усложнения вашего API.
  • from превращает массив, обещание или итерацию в Observable
  • fromEvent превращает событие в наблюдаемое
  • Когда мы используем from или fromEvent для создания нового потока. RxJS заботится только о значениях, которые производит поток, а не о каждом отдельном событии.
  • of преобразует список значений в наблюдаемую последовательность. По сравнению с from, of не выравнивает источник данных. Таким образом, он генерирует каждый аргумент целиком вместо один за другим

Полезные источники

Спасибо, что прочитали вторую часть серии RxJS! Следите за обновлениями 🤩

Пропустили первое введение RxJS? Вы можете найти это здесь"

Я хотел бы услышать ваши идеи и мысли 🤗 Пожалуйста, запишите их ниже 👇👇👇

✍️ Автор

Винь Ле @ vinhle95

👨🏻‍💻🤓🏋️‍🏸🎾🚀

Деловой человек, ученик на протяжении всей жизни, любитель технологий и разработчик программного обеспечения

Сказать привет 👋 на

✅ Github

✅ LinkedIn

✅ Средний

✅ LinkedIn