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

В этом небольшом коде я просто создаю объект-реквизит, содержащий $ мраморный поток из массива.

Чуть ниже я пытаюсь войти в каждый элемент в потоке, но ничего не происходит, и я не понимаю, почему.

---

Плункер здесь: https://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

Ничего не показывать в файле HTML, только в файле JS

Любая идея?

Answer 1

Как указано в документации по xstream, потоки простаивают (не выполняются) до тех пор, пока не получат своего первого слушателя, что достигается с помощью 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}

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, он предупредил бы вас о выражении с неиспользованным возвращаемым значением.