Jak korzystać z operatora Rx.Observable.prototype.let?

Question

Przykład i wyjaśnienie operatora let (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/let.md) nie są jasne. Ktoś ma dobry przykład/wyjaśnienie jak działa operator let i kiedy powinniśmy go używać?

Answer 1

&tldr;

Jest to funkcja wygoda dla mogąc compartmentalize logiki i wstrzyknąć go do rurociągu.

Longer Wyjaśnienie

source jest prawdopodobnie najbardziej ostateczne wyjaśnienie. Jest to po prostu przekazywanie funkcji, która zostaje wywołana ze źródłem Observable.

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

Dzięki temu możemy utworzyć lub wstępnie zdefiniować potok, który chcemy ponownie wykorzystać dla wielu źródeł. Rozważenie wspólnej trop dla Rx, reaktywnej pasku wyszukiwania:

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

Powyższe powinno dać elementarne poczucie struktury jak rurociąg może zostać utworzony. Gdybyśmy chcieli wypróbować niektóre z tej logiki, aby oczyścić kod lub móc go użyć w innym miejscu, może to być trochę trudne, ponieważ zwykle oznacza to stworzenie nowego operatora (i to ma swoje własne bóle głowy).

Rozwiązaniem jest stosunkowo proste podejście polegające na przeciągnięciu wspólnej logiki do funkcji, która może zostać przekazana jako źródło Observable i zwróci nową Observable z zastosowaną logiką.

Więc powyższe może stać:

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