Kilka pytań dotyczących strumienii (Rx, most)

0

Cześć
Jestem nowy w strumieniach i w observable patternie i nie do końca kumam czacze. Jakby ktoś mogł podać rozwiązania na przykładzie Rx albo Most.js to byłbym wdzięczny.
Chodzi tu o problem zrozumieniowo/ składniowy. Jednak to nie takie oczywiste wszystko.

  1. Mam dwa strumienie, jeden fromPromise ('fetch/ajax') drugi fromEvent ('click). Jak zrobic żeby za pomocą fromEvent wywołać strumien fromPromise ?

  2. Jezeli mam takie dwa eventy. To jak na fromEvent nałożyc dwa scenariusze. Przyjmijmy że pierwszy miałby obsługiwać sytuacje w której click value === '' a drugi === 'submit'. Chodzi mi o to że jak mamy fromEvent to filtrujemy wartość i pozniej robimy observe, mozna sie bez problemu podpinać do jednego strumienia z kilkoma akcjami?

Dzięki za pomoc :)
Pozdrawiam

3
  1. Nie do końca czaję o co Ci chodzi, coś takiego:
<button id="example">Click</button>
const button = document.getElementById('example')

const exampleEvent = Rx.Observable
  .fromEvent(button, 'click')
  .flatMap(() => fetch('//jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
  )

exampleEvent
  .subscribe(
    result => console.log(result.title),
    error => console.log(error)
  )

CodePen: http://codepen.io/caderek/pen/MpMdEq?editors=1011
?

  1. Tu pewnie o coś takiego chodzi:
<div id="example">
  <button data-value="1">1</button>
  <button data-value="2">2</button>
</div>
const exampleDiv = document.getElementById('example')

const exampleEvent = Rx.Observable.fromEvent(exampleDiv, 'click')

exampleEvent 
  .filter(event => event.target.dataset.value === '1')
  .forEach(() => console.log('Click from button 1'))

exampleEvent 
  .filter(event => event.target.dataset.value === '2')
  .forEach(() => console.log('Click from button 2'))

CodePen: http://codepen.io/caderek/pen/zZVXRR?editors=1011

0

Ok dzięki. Troche to rozjaśnia sprawe, szczególnie podłączanie sie do observable objectu.
Ale co do fetcha.... dlaczego nie zrobiles z niego strumeniu? Nie powinno sie tego robic? Czy tutaj po prostu nie ma potrzeby bo zakladamy ze nie filtrujemy nic.
Co jakby fetch byl strumieniem? Czy jest mozliwosc ze pod clicka podepne akcje w foreach i w strumieniu z fetch'a tez podepne akcje jak sie wykona? Chodzi mi o hipotetyczna sytuacje.

Troche nie rozumiem strumieni pod tym wzgledem ze o ile websockety moglby pasowac mi terminologią do strumieni bo cały czas otrzymujemy dane z serwera to ani click ani http request nie pasuje mi do tego. One bardziej wygladaja na jednorazowe akcje niz na ciąg.

1
Stiffler napisał(a):

Ale co do fetcha.... dlaczego nie zrobiles z niego strumeniu? Nie powinno sie tego robic?

Fragment:

  .flatMap(() => fetch('//jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
  )

nadal produkuje Observable,

moglibyśmy napisać tak:

  .flatMap(() => Rx.Observable.fromPromise(
    fetch('//jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
  ))

ale nic by to nie zmieniło w tym przykładzie, bo flatMap i tak wyciąga z obu wersji wartości i produkuje z nich jeden Observable emitujący już zresolvolwowane dane.

Czy tutaj po prostu nie ma potrzeby bo zakladamy ze nie filtrujemy nic.

Filtrować nadal możesz (nie wiem czy dobrze rozumiem co masz na myśli):

const button = document.getElementById('example')

const exampleEvent = Rx.Observable
  .fromEvent(button, 'click')
  .flatMap(() => fetch(`//jsonplaceholder.typicode.com/posts/${rand()}`)
    .then(response => response.json())
  )


exampleEvent
  .map(result => result.title)
  .filter(title => title.includes('qu'))
  .subscribe(
    result => console.log(result),
    error => console.log(error)
  )

const rand = () =>
  Math.floor(Math.random() * 10) + 1

CodePen: https://codepen.io/caderek/pen/wdwwdo?editors=1011

Co jakby fetch byl strumieniem? Czy jest mozliwosc ze pod clicka podepne akcje w foreach i w strumieniu z fetch'a tez podepne akcje jak sie wykona? Chodzi mi o hipotetyczna sytuacje.

Napisz jaiś pseudokod co masz na myśli.

Troche nie rozumiem strumieni pod tym wzgledem ze o ile websockety moglby pasowac mi terminologią do strumieni bo cały czas otrzymujemy dane z serwera to ani click ani http request nie pasuje mi do tego. One bardziej wygladaja na jednorazowe akcje niz na ciąg.

Co do click - źle na to patrzysz, eventy bardzo naturalnie wpasowują się w definicję strumienia - event może zachodzić wielokrotnie - możnaby powiedzieć, że w tym przypadku "serwerem" jest uzytkownik.

Co do Observable.fromPromise - mozesz na to patrzeć jak na producera streamu, który zawiera jeden element (resolved value) i się kończy. Jest to wraper, umożliwiający skorzystanie z dodatkowych metod udostępnianych przez Rx'a.

1 użytkowników online, w tym zalogowanych: 0, gości: 1