Cyclejs 아무것도

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 : 단지 JS 파일

어떤 생각에 HTML 파일을 표시하는 https://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

아무것도?

Answer 1

xstream 문서에 설명 된대로 스트림은 addListener 메서드로 수행되는 첫 번째 listener이 될 때까지 유휴 (실행되지 않음)입니다.

props.marbles$.map 스트림은 변수 y에 할당됩니다. 그런 다음 y.addListener 메소드가 호출됩니다. addListener이 호출되면 props.marbles$.map 메서드가 마지막으로 실행됩니다.

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를 넣을 수 있습니다 : 콘솔에서

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

출력 콘솔 :

012 콘솔에서

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

출력 : André suggested, 당신은 XStream을 debug 사용할 수 있습니다 3,516,

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

---

OR,

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 같은 일부 linting 도구를 사용하는 경우 사용되지 않는 반환 값을 가진 문 당신을 경고 한 것이다.