Understanding RxJS Flatmap, Flatmap, The Last in C # Terms

Question

I am mainly a C # developer, expanding my horizons in JavaScript and recently came across a library called RxJS.

I would like to understand how Map , Flatmap , FlatmapLatest and are there any equivalents in C # .Net?

Answer 1

RxJS is part of the Reactive Extensions family, which is implemented in various languages, including C # (naturally, since Rx is now a Microsoft project).

So yes, there are equivalences in C # ... :-)

The concepts of map, flatMap, and flatMapLatest are not obvious. I myself am new to RxJS, so I hope that everything is correct ...

map takes elements of the observable and maps them (converts them) to something else. For instance. it can be an arithmetic operation on numbers, converting a primitive to an object, or deleting a key from an object, etc.

flatMap has several options, but basically it takes a function that returns the observable from each element of the observable source. This creates a stream of threads (where stream = observable = sequence of elements), so flatMap smooths it into a single stream / observable, where all elements are in sequence.
Mmm, confusing explanation, I'm afraid ... Let me make Ascii balls to explain.

 --A------------------- // First stream --a1----a2----a3------ // flatMap function result -----B---------------- // Second stream -----b1----b2----b3--- // flatMap function result --a1-b1-a2-b2-a3-b3--- // flatMap 

flatMapLatest is a flat map in which only the elements of the current observable are emitted. If a new observable appears, the values ​​of the previous one are ignored.

 --A------------------- // First stream --a1----a2----a3------ // flatMapLatest function result -----B---------------- // Second stream -----b1----b2----b3--- // flatMapLatest function result --a1-b1----b2----b3--- // flatMapLatest 

[EDIT] I made the code to better understand the concepts ... It wasn’t obvious to show flatMapLatest ... I saw that it was used for Ajax requests: if a new one is emitted, it is not necessary to take into account the previous (s).

Demo : clicking on any button shows the source event.

• Click on the first button to see an enriched event (with a map).
• Press the second button to trigger a sequence of 5 events at 1-second intervals (flatMap). If you click again before the end of the sequence, you will see alternating results from the current observables.
• The third button works the same way, but using flatMapLatest, a new click discards the results of the previous sequence.

 // Generic code to display results var results = document.getElementById('results'); function showHTML(html) { results.insertAdjacentHTML('beforeend', html); } function show(text, obj) { showHTML("<p>" + text + (obj !== undefined ? ': ' + JSON.stringify(obj) : '') + "<p>"); } function showObject(obj) { show("<p>" + JSON.stringify(obj) + "<p>"); } // The real code var button1 = document.querySelector('#button1'); var button2 = document.querySelector('#button2'); var button3 = document.querySelector('#button3'); var buttonClickStream1 = Rx.Observable.fromEvent(button1, 'click'); var buttonClickStream2 = Rx.Observable.fromEvent(button2, 'click'); var buttonClickStream3 = Rx.Observable.fromEvent(button3, 'click'); // Raw Rx.Observable.merge(buttonClickStream1, buttonClickStream2, buttonClickStream3) .subscribe( function(v) { show("Value", v); }, function(e) { show("Error", e); }, function() { show("Done"); } ); // Map buttonClickStream1 .map(function (e, i) { e.id = i; // Add id et = new Date(); // Add timestamp return e; }) .subscribe(function(v) { show("Button 1", v) }); // Simplify: no errors, no completion // FlatMap buttonClickStream2 // Returns several values .flatMap(function (e, i) { return Rx.Observable .interval(1000).take(5) .flatMap(function (x, j) { return Rx.Observable.of(i + ' ' + j) }); }) .subscribe(function(v) { show("Button 2", v) }); // FlatMapLatest buttonClickStream3 // Returns several values but keep only the last one .flatMapLatest(function (e, i) { return Rx.Observable .interval(1000).take(5) .flatMap(function (x, j) { return Rx.Observable.of(i + ' ' + j) }); }) .subscribe(function(v) { show("Button 3", v) }); 

 <button type="button" id="button1">Test map</button> <button type="button" id="button2">Test flatMap</button> <button type="button" id="button3">Test flatMapLatest</button> <div id="results"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.lite.js"></script>