Рубрики
Без рубрики

Глубокое погружение в функцию трубы в RXJS

Введение в состав функции на основе функции `pipe` в RXJS .. Tagged с Rxjs, JavaScript, функциональной, композицией.

Версия 5 RXJS представила концепцию салтал (также известен как Pipable ) Операторы. Версия 6 пошла на шаг вперед и установил старый способ вызовы операторов (цепочка метода).

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

Эта статья была первоначально размещена мой блог .

Сочинение функций

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

Взгляните на приведенный ниже кусок кода:

const getElement = 
    (id) => document.getElementById(id);

const getValue = 
    (element) => element.value;

function logElementValue(id) {
  const el = getElement(id);
  const value = getValue(el);
  console.log(value);
}

LogElementValue Функция принимает id и выйдет в консоль значение элемента с предоставленным id Анкет

Можете ли вы увидеть шаблон в реализации этой функции? Во -первых, он вызывает getElement с id и хранит результат в Эль Анкет Далее, результат передается GetValue который дает новый результат, Эль Анкет Наконец, Эль передается Консоль.log Анкет

Эта функция делает, это просто взятие результата функции и передача ее в качестве аргумента другой функции.

Есть ли лучший, более краткий способ реализации этой функции?

Допустим, у нас просто есть две функции ( getElement и GetValue ) Мы будем реализовать общую функцию с именем составить это пройдет результат getElement к getValue .

const compose = (f, g) => x => g(f(x));

Определение очень простое, но может занять минуту, чтобы разобрать. Мы определили функцию, которая принимает две функции f и грамм (Это было бы getElement и getValue в нашем случае) и возвращает новую функцию. Эта новая функция примет аргумент, передайте ее f а затем передайте результат g .

Это именно то, что нам нужно! Теперь я могу переписать LogElementValue :

function logElementValue(id) {
  const getValueFromId = compose(getElement, getValue);
  const value = getValueFromId(id);
  console.log(value);
}

Как насчет более двух функций?

Но ждать! Как только у нас появится результат вызова GetValueFromid Мы сразу передаем это Консоль.log Анкет Так что это та же схема здесь. Мы могли бы написать это так:

function logElementValue(id) {
  const getValueFromId = compose(getElement, getValue);
  const logValue = compose(getValueFromId, console.log);
  logValue(id);
}

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

const composeMany = (...args) => args.reduce(compose);

Еще один мозговой тизер! Composemany принимает любое количество функций. Они хранятся в args множество. Мы уменьшить над args Создание каждой функции с результатом сочинения предыдущих функций.

В любом случае, результаты – это функция, которая занимает любое количество функций и пройдет результат N-th функция (N+1) -th функция

Но чего мы достигли этого?

function logElementValue(id) {  
  const logValue = composeMany(getElement, getValue, console.log);
  logValue(id);
}

Что может быть упрощено еще больше:

const logElementValue = composeMany(getElement, getValue, console.log);

Разве это не круто? Мы значительно упростили код. Теперь очень ясно, что LogElementValue делает.

И кстати – Composemany это просто имя, пришло. Официальное имя труба !

const logElementValue = pipe(getElement, getValue, console.log);

Вернуться к RXJS

Давайте возьмем пример труба Использование в RXJS.

number$.pipe(
    map(n => n * n),
    filter(n => n % 2 === 0)
);

Мы также можем написать это по -другому:

const { pipe } = rxjs;

const transformNumbers = pipe(
     map(x => x * x),
     filter(x => x % 2 === 0),
);

transformNumbers(number$).subscribe(console.log);

И результат точно такой же! Как видите, труба Функция в RXJS ведет себя точно так же, как труба функция, которую мы определили в первой части статьи. Он занимает ряд функций и сочиняет их, передавая результат функции в качестве аргумента другой функции.

Вы можете сказать, что это отличается от предыдущего примера, потому что здесь мы вызовываем карта и фильтр И не просто прохождение их. На самом деле, оба карта и фильтр вернуть функции. Мы не составляем карта и фильтр сами себя а скорее функции, возвращаемые, вызывая их.

Вы можете проверить, как реализует RXJS труба функция Здесь Анкет

Оператор трубопровода

Наша функция – такая полезная концепция, что она может быть добавлена в качестве отдельного оператора на язык JavaScript!

Это будет означать, что пример из предыдущей статьи может быть написан еще проще:

const logElementValue = getElement |> getValue |> console.log;

Вы можете увидеть детали предложения Здесь Анкет

Резюме

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

Тот факт, что RXJS мигрировал из традиционного, объектно-ориентированного подхода к применению операторов к подходу к трубопроводу, показывает, насколько сильным является влияние функционального программирования в настоящее время. Я думаю, это здорово!

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

Хотите узнать больше?

Вам понравилась эта статья TypeScript? Бьюсь об заклад, тебе тоже понравится моя книга!

⭐ Advanced TypeScript ⭐ ️

Оригинал: “https://dev.to/miloszpp/deep-dive-into-pipe-function-in-rxjs-3bmi”

Читайте ещё по теме: