Демистификация RxJS и реактивного функционального программирования

С чего начать?

Во-первых, я считаю, что для начала разговора о RxJS неплохо бы знать, что такое реактивное функциональное программирование. По функциональной части можно сделать вывод, что речь идет об использовании функций, функции — это сердце этой методологии. Уже реактивная часть, есть gist, очень хороший @andrestaltz этот gist, который объясняет на английском языке, но имеет легкое понимание и с простым переводом google translate можно понять.
Вкратце, реактивное программирование — это программирование в потоках данных. Этот стиль с RxJS известен использованием труб для лучшего контроля. Мне также нравится и я слышал выражение «быть сантехником с кодом».

Для чего нужен этот RxJS?

RxJS предназначен для координации сложных событий.
Как сказано в документации, это loadash для событий.
ПРИМЕЧАНИЕ: Код, приведенный в этом посте блога, подходит для любого фронтэнда или бэкэнда, если у вас есть используемая библиотека.

Как и почему я должен быть сантехником с кодом?

Когда мы говорим о том, что быть водопроводчиком кода, значит использовать код таким образом, чтобы он следовал за потоком, я собираюсь обсудить некоторые функции RxJS, без лишних слов, давайте поговорим о моей любимой: BehaviorSubject

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

Но это все?

Никогда! BehaviorSubject, может создать pub/sub в вашей системе, который, если о нем хорошо позаботиться и обеспечить надлежащую безопасность, может стать поставщиком некоторых данных из вашего приложения.

string$ = new BehavioSubject('').pipe(distinctUntilChanged());

setGlobalString(value: string): void {
  string$.next(value);
}

subcribeGlobalString(): Subscription {
  return string$;
}

// alguma parte publica nesse observable

setGlobalString('valor x');


// outra parte da aplicação, toda vez que o valor é alterado faz alguma coisa

subscribeGlobalString().subscribe((stringValue: string) => {
  // b terá o valor x, se ele vir a mudar b receberá o valor do BehavioSubject novamente
   const b = stringValue;
});

Войдите в полноэкранный режим Выход из полноэкранного режима

Реляционные данные

В Angular я много раз видел последовательность, которая заставляет фей умирать, — subscribe внутри subscribe. Идеально, чтобы код выглядел красиво и эффективно, без побочных эффектов.
Карта switchMap позволяет использовать реляционные данные, полученные от одной подписки, для создания другой.

плохой пример

хороший пример

Но что, если эти данные нужны где-то еще?

У нас есть оператор tap(), который принимает значение, поступающее по трубе, и может быть использован для создания побочных эффектов, либо записи в журнал, либо вызова внешних функций. Как обновлять состояния компонентов.

some$.pipe(tap((value) => otherFunc(value))).subscribe(v => ....
Войдите в полноэкранный режим Выход из полноэкранного режима

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

Заключение

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

Оцените статью
devanswers.ru
Добавить комментарий