Cyclejs和西河不顯示任何

Question

餘米試圖創建一個數組的地圖運營商的內部日誌流，但似乎不順心的事在我的代碼，我不能指出來......

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})) 
} 

在這個小代碼中，我簡單地創建一個包含從數組中的彈珠$流的道具對象。

就在下面我嘗試登錄流中的每個項目，但沒有任何反應，我不明白爲什麼。

---

Plunker這裏：https://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

沒有顯示HTML文件，只在JS文件

任何想法？

Answer 1

正如xstream文檔說明，直到他們得到他們的第一個listener，它與addListener方法來實現流是空閒（不執行）。

請注意，props.marbles$.map流被分配給變量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({}) 

輸出在控制檯：

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

---

或者你可以把console.log的聽衆，而不是map方法的next屬性：

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

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

在產出控制檯：

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

---

，或者如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()。只需將它添加到運營商的鏈條：如果你使用一些掉毛工具，如https://github.com/bodil/eslint-config-cleanjs

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

，它會提醒您未使用的返回值的聲明。