Cyclejs und Xstream nichts anzeigt

Question

Ich versuche, einen Strom aus einem Array zu erstellen innerhalb seiner Karte Betreiber anmelden, aber es scheint, dass etwas in meinem Code falsch geht, und ich kann es nicht darauf hin ...

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

Auf diesem kleinen Code, ich bin einfach ein Props-Objekt mit einem Marmor $ Stream aus einem Array erstellen.

Gerade unten versuche ich, jeden Gegenstand im Strom anzumelden, aber nichts passiert, und ich verstehe nicht warum.

---

Plunker hier: https://plnkr.co/edit/6uMsLIl1Edd5x670OqHa?p=preview

Nichts auf der HTML-Datei zu zeigen, nur auf der JS-Datei

Jede Idee?

Answer 1

Wie in den xstream Docs angegeben, sind Streams im Leerlauf (nicht ausgeführt), bis sie ihre erste listener erhalten, die mit der addListener Methode durchgeführt wird.

Beachten Sie unten, dass der Stream props.marbles$.map der Variablen y zugewiesen ist. Dann wird die y.addListener-Methode aufgerufen. Wenn addListener aufgerufen wird, wird die Methode props.marbles$.map schließlich ausgeführt.

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

Ausgänge in der Konsole:

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

---

Alternativ können Sie die console.log in der next Eigenschaft des Zuhörers an Stelle der map Methode setzen:

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

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

Ausgänge in die Konsole:

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

---

OR, wie André suggested Sie xstream debug verwenden können:

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

Ausgänge in der Konsole:

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

Wenn Sie props.marbles$.map(....) anrufen, ohne seine Ausgabe zu erfassen, haben Sie einen Stream erstellt, der einfach auf den Boden fallengelassen und nie benutzt wird. Da dies nur eine funktionale Programmierung ist, ist es derselbe Fall wie const y = Math.round(x), aber geschrieben als Math.round(x). Es würde die Zahl x nehmen, die auf die nächste Ganzzahl gerundet zurückgeben und das Ergebnis fallen lassen.

Da Sie nur den Wert mit einer Konsole debuggen möchten, empfehle ich die Verwendung des Xstream-Operators debug(). Fügen Sie es einfach an die Kette von Operatoren:

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

Wenn Sie einige Fusseln Tools wie https://github.com/bodil/eslint-config-cleanjs verwenden, wäre es Ihnen eine Erklärung mit ungebrauchten Rückgabewert gewarnt.