javascript - mergemap - switchmap español

Comprender Flatmap de RXJS, Flatmap Latest en términos de C#

Question

Principalmente soy un desarrollador de c # que expande mi horizonte en javascript y recientemente encontré una biblioteca llamada RXJS. Me gustaría entender cómo se relacionan Map, Flatmap, FlatmapLatest y hay algún equivalente en C # .Net?

Answer 1

RxJS es parte de la familia de Reactive Extensions, que se implementa en varios idiomas, incluido C # (naturalmente, como Rx ahora es un proyecto de Microsoft).

Entonces, sí, hay equivalencias en C # ... :-)

Los conceptos de map, flatMap y flatMapLatest no son obvios. Soy un principiante en RxJS, así que espero hacerlo bien ...

map toma los elementos de lo observable y los mapea (los transforma) en otra cosa. P.ej. podría ser una operación aritmética de números, transformar una primitiva en un objeto o eliminar una clave del objeto, etc.

flatMap tiene varias variantes, pero básicamente toma una función que devuelve un observable de cada elemento de la fuente observable. Esto crea una secuencia de flujos (donde stream = observable = secuencia de elementos), por lo que flatMap aplana esto en una sola secuencia / observable donde todos los elementos están en secuencia.
Mmm, explicación confusa, me temo ... Hagamos Ascii mármoles para explicar.

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

flatMapLatest es un flatMap donde solo se emiten los elementos del observable actual. Si aparece un nuevo observable, los valores del anterior son ignorados.

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

[EDIT] Hice algunos códigos para comprender mejor los conceptos ... Mostrar flatMapLatest no era obvio ... Lo vi utilizado en solicitudes Ajax: si se emite uno nuevo, no es necesario tener en cuenta el anterior (s) )

Demostración : un clic en cualquier botón muestra el evento en bruto.

• Haga clic en el primer botón para ver un evento enriquecido (con mapa).
• Haga clic en el segundo botón para activar una secuencia de 5 eventos con un intervalo de 1 s (flatMap). Si vuelve a hacer clic antes de que la secuencia finalice, verá los resultados intercalados de los observables en ejecución.
• El tercer botón actúa de manera similar, pero al usar flatMapLatest, un nuevo clic deja caer los resultados de la secuencia anterior.

// 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
    e.t = 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>