Come utilizzare l'operatore Rx.Observable.prototype.let?

Question

L'esempio e la spiegazione dell'operatore let (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) non è chiaro. Qualcuno ha un buon esempio/spiegazione su come funziona l'operatore let e quando dovremmo usarlo?

Answer 1

&tldr;

È una funzione comfort per poter compartimenti logica e iniettare in una conduttura.

Longer Spiegazione

Il source è probabilmente la spiegazione più definitiva. Si tratta in realtà solo di passare una funzione che viene chiamata con una fonte Observable.

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

L'utilità di questo è che siamo in grado di creare o di pre-definire una conduttura che si desidera riutilizzare per più fonti. Si consideri un tropo comune per Rx, la barra di ricerca reattiva:

// 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); 

Quanto sopra dovrebbe dare un senso di base della struttura di come potrebbe essere creato un oleodotto. Se volessimo provare ad astrarre parte di questa logica per ripulire il codice o per poterlo usare altrove, può essere un po 'complicato, perché di solito significa creare un nuovo operatore (e questo ha i suoi mal di testa).

La soluzione è un approccio relativamente semplice di inserimento della logica comune in una funzione che può essere passata a una fonte Observable e restituirà un nuovo Observable con tale logica applicata.

Così il sopra potrebbe diventare:

//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);