RXJS – это библиотека JavaScript для реактивного программирования. Он обеспечивает реактивный способ работы с вашими данными благодаря использованию наблюдаемых. В этом посте я собираюсь объяснить это, используя аналогию с использованием мраморов (и я постараюсь не потерять их в процессе;))
Наблюдается
Облюданные входит в основе RXJS, они наблюдаются, и это делает код реактивным, вы реагируете на изменения данных. Ну вот идет аналогии: наблюдаемый похож на мраморную машину, которая излучает все мрамор (данные), у него есть, по порядку и один за другим, пока не пусто.
// from generates an Observable from an array
import { from } from "rxjs"
// create a machine with 4 marbles
const marbles = ['red', 'green', 'red', 'blue'];
// observe the machine
from(marbles).subscribe(
(marble) => console.log(marble)
)
// outputs:
// red - green - red - blue
Предметы
В примере наблюдаемая (мраморная машина) создана и подписана (наблюдается). Недостатком является то, что если машина пуста, нет способа пополнить его и полезно только для одного наблюдателя. Вот где приходят субъекты RXJS. Субъекты являются особым типом наблюдаемыми, они могут поделиться излучаемыми данными над несколькими наблюдателями и позволяют выделять данные всем наблюдателям. В нашей аналогии: мраморная машина имеет мраморный погрузчик и все мрамор, которые выходят, будут клонированы и даны всем наблюдателям.
import { Subject } from "rxjs"
//create an advanced marble machine
const marbleMachine = new Subject();
// Pete observes the machine
marbleMachine.subscribe(
(marble) => console.log('Observer:Pete', marble)
)
// add a red marble
marbleMachine.next('red')
// Output:
// Observer:Pete, red
// Anna observes the machine
marbleMachine.subscribe(
(marble) => console.log('Observer:Anna', marble)
)
// add a green marble
marbleMachine.next('green')
// Output:
// Observer:Pete, green
// Observer:Anna, green
Трубы/операторы
Что, если вы хотите посчитать количество красных мраморов, выделяют машину. Конечно, вы могли бы собрать все мрамор и посчитать красные, но это можно сделать лучше. Какие Rxjs позволяет вам сделать, это создать трубу от наблюдаемого для оператора. В Marble Language: вы можете подключить трубы To The Machine, чтобы перенаправить все мрамор к небольшим станкам (операторам), которые могут делать вещи. Так что если Пит хочет сделать что-то с красными мраморами и Анна с зелеными, вы получите следующий пример
import { Subject } from "rxjs"
import { filter } from "rxjs/operators"
//create an advanced marble machine
const marbleMachine = new Subject();
// Pete adds a pipe to the machine to a small marble machine that
// only emits the red marbles and then observes that machine
marbleMachine.pipe(
filter((marble) => marble === 'red')
).subscribe(
(marble) => console.log('Observer:Pete', marble)
)
// Anna adds a pipe to the machine to a small marble machine that
// only emits the green and red marbles and then observes that machine
marbleMachine.pipe(
filter((marble) => marble === 'green' || marble === 'red')
).subscribe(
(marble) => console.log('Observer:Anna', marble)
)
// feed the machine a yellow marble
marbleMachine.next('yellow');
// feed the machine a green marble
marbleMachine.next('green');
// output:
// Observer:Anna, green
// feed the machine a red marble
marbleMachine.next('red');
// output:
// Observer:Pete, red
// Observer:Anna, red
Операторы генерируют новый наблюдаемый, чтобы вы могли бы трусить их другому оператору и т. Д. И т. Д.
Играть с этим! Посмотрите на операторы, доступные для RXJS и попробуйте объединить их создание полезных наблюдаемых! Или Играть с мрамором, это всегда весело;)
RXJS – отличный способ получить захват по течению данных в вашем приложении JavaScript. Лично я использую его в значительной степени для каждого проекта JavaScript, в основном в сочетании с угловой, который сам также использует RXJS.
Я планирую сделать последующую проверку, если этот пост достаточно популярен, используя аналогию мрамора для более продвинутых примеров RXJS.
Оригинал: “https://dev.to/jmdejager/rxjs-simplified-don-t-lose-your-marbles-2204”