RxJs - pluck

Reading time ~1 minute

Задача заметки - понять, что такое метод pluck.

Допустим, у нас есть input, на который мы подписаны и у которого забираем вводимое значение:

import { fromEvent } from 'rxjs';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$.subscribe(event => console.log(event.target.value));

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

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$
  .pipe(map((event: InputEvent) => event.target.value))
  .subscribe((value: string) => console.log(value));

Но в RxJs есть специальный метод pluck, который упрошает выборку значения из нужного поля объекта:

import { fromEvent } from 'rxjs';
import { pluck } from 'rxjs/operators';

const input = document.querySelector('#text');
const course$ = fromEvent(input, 'input');

course$
  .pipe(pluck('target', 'value'))
  .subscribe((value: string) => console.log(value));

То есть, мы знаем, что работает с объектом event, у которого есть поле target, у которого также есть поле value, значение которого нам нужно получить. Поэтому воссоздаем структуру объекта event так - pluck(‘target’, ‘value’).


VSC - explorer.compactFolders

В Visual Studio Code по умолчанию стоит настройка, которая отображает на владке Explorer вложенные папки таким образом:![VSC - Default Vi...… Continue reading

Flattering operators

Published on July 12, 2024

Оператор withLatestFrom

Published on July 03, 2024