Как использовать оператор Rx.Observable.prototype.let?

Пример и объяснение оператора let (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) не ясны. У кого-нибудь есть хороший пример/объяснение, как работает оператор let, и когда мы должны его использовать?

Ответы

Ответ 1

& TL;DR;

Это удобная функция для возможности разделить логику и ввести ее в конвейер.

Дольше Объяснение

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

Rx.Observable.prototype.let = function(fn) {
  return fn(this);
}

Утилита этого заключается в том, что мы можем создать или предварительно определить конвейер, который вы хотите повторно использовать для нескольких источников. Рассмотрим общий троп для Rx, реактивной панели поиска:

// Listen to a key up event on the search bar 
// and emit the value of the search
Rx.Observable.fromEvent(searchBar, 'keyup', e => e.target.value)
  // Don't search too eagerly
  .filter(text => text.length > 3)
  .debounceTime(500)
  //Search logic
  .flatMap(text => $.getJSON(`my/search/api?q=${text}`))
  .flatMap({results} => results)
  //Handler
  .subscribe(appendToList);

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

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

Таким образом, выше может быть:

//Defined in pipelines.js
function filterBuilder(minText, debounceTime) {
  return (source) => 
    source.filter(text => text.length > minText)
          .debounce(debounceTime);
}

function queryBuilder(baseUrl) {
  return (source) => 
    source.flatMap(text => $.getJSON(`${baseUrl}?q=${text}`))
          .flatMap({results} => results);
}


//In your application code

Rx.Observable.fromEvent(searchBar, 'keyup', e => e.target.value)
  .let(filterBuilder(3, 500))
  .let(queryBuilder('my/search/api'))
  .subscribe(appendResults);