Cyclejsと私はそのマップ演算子の内側にログインする配列からのストリームを作成しようとしているが、何かが私のコードではうまくいかないと、私はそれを指摘することができないようですmは何も

Question

を表示していないXStreamの...

import {Slider} from './slider/slider' 
import xs from 'xstream' 

export function App(sources) { 
    const props = { 
     marbles$: xs.fromArray([{ 
      color: 'red', 
      x: 0 
     }, { 
      color: 'blue', 
      x: 20 
     }]) 
    } 

    props.marbles$.map(item => { 
     console.log(item) // nothing displayed on here 
     return item 
    }) 
    return Slider(Object.assign(sources, {props})) 
} 

この小さなコードでは、配列からmarbles $ストリームを含むpropsオブジェクトを作成するだけです。

ストリームの各アイテムにログオンしようとしましたが、何も起こりません。理由はわかりません。

---

ここPlunker：HTMLファイルに表示するhttps://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

何もない、唯一のJSファイルに

任意のアイデア？

Answer 1

xstream文書に記載されているように、ストリームは、addListenerメソッドで達成される最初のlistenerを得るまでアイドル（実行されません）です。

ストリームは変数yに割り当てられています。その後、y.addListenerメソッドが呼び出されます。 addListenerが呼び出されると、最後にprops.marbles$.mapメソッドが実行されます。コンソールで

const props = { 
    marbles$: xstream.Stream.fromArray([{ 
    color: 'red', 
    x: 0 
    }, { 
    color: 'blue', 
    x: 20 
    }]) 
} 

const y = props.marbles$.map(item => { 
    console.log('map', item) 
    return item 
}) 

y.addListener({}) 

出力：

const y = props.marbles$.map(item => { 
    return item 
}) 

y.addListener({ 
    next: item => console.log('listener', item) 
}) 

出力で：

map > Object {color: "red", x: 0} 
map > Object {color: "blue", x: 20} 

---

代わりにあなたの代わりにmap方法のリスナーのnextプロパティにconsole.logを置くことができますコンソール：

listener > Object {color: "red", x: 0} 
listener > Object {color: "blue", x: 20} 

---

OR、André suggestedとして、あなたはXStreamのdebugを使用することができます。

const props = { 
    marbles$: xstream.Stream.fromArray([{ 
    color: 'red', 
    x: 0 
    }, { 
    color: 'blue', 
    x: 20 
    }]).debug('debug 1') 
} 

const y = props.marbles$.map(item => { 
    return item 
}).debug('debug 2') 

y.addListener({}) 

コンソールでの出力：

debug 1 > Object {color: "red", x: 0} 
debug 2 > Object {color: "red", x: 0} 
debug 1 > Object {color: "blue", x: 20} 
debug 2 > Object {color: "blue", x: 20} 

Answer 2

出力をキャプチャせずにprops.marbles$.map(....)に電話すると、単純に床に落とされて使用されないストリームが作成されます。これは単なる関数型プログラミングなので、const y = Math.round(x)と同じケースですが、Math.round(x)と書かれています。数値がxになり、それを最も近い整数に丸めて返し、結果をドロップします。

コンソールで値をデバッグしたかったので、xstream演算子debug()を使用することをお勧めします。ただ、事業者のチェーンに追加します。

const props = { 
    marbles$: xs.fromArray([{ 
     color: 'red', 
     x: 0 
    }, { 
     color: 'blue', 
     x: 20 
    }]).debug() 
} 

あなたは、このようなhttps://github.com/bodil/eslint-config-cleanjsなど、いくつかのリンティングツールを使用している場合、それは未使用の戻り値との声明をあなたに警告しているだろう。