Cyclejs 和 xstream 不显示任何内容

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

在这段小代码中，我只是创建了一个包含来自数组的 marbles$ 流的 props 对象。

就在下面，我尝试登录流中的每个项目但没有任何反应，我不明白为什么。

笨蛋在这里：https://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

HTML 文件中没有显示内容，仅在 JS 文件中显示

有什么想法吗？

Answer 1

如果您调用 props.marbles$.map(....) 而不捕获其输出，您将创建一个流，该流只是掉在地上并且从未使用过。因为这只是函数式编程，所以它与const y = Math.round(x)相同，但写成Math.round(x)。它会将数字 x、return 四舍五入到最接近的整数，然后舍弃结果。

由于您只想使用控制台调试该值，我建议使用 xstream 运算符 debug()。只需将其添加到运算符链中即可：

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

如果您使用一些 linting 工具，例如 https://github.com/bodil/eslint-config-cleanjs，它会警告您有未使用的 return 值的语句。

Answer 2

如 xstream docs, streams are idle (not executed) until they get their first 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 放在侦听器的 next 属性中，而不是 map 方法：

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}

或者，作为，您可以使用 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}

Cyclejs 和 xstream 不显示任何内容

Cyclejs and xstream not displaying anything

javascript

cyclejs

xstream-js