1484231791 by Unknown

Author:Unknown
Language: eng
Format: epub
Published: 2017-12-28T09:49:30+00:00

Chapter 3 reaCtive programming

Finally, we can create the stream using xs.fromArray passing the initial array, and this will produce an initial stream that will emit the array values. After that we apply all the different transformations via XStream operators like filter, compose, and fold. Bear in mind that the second parameter of the fold operator is the accumulator initial value, and in our case we want to start from the value zero and sum all the others.

The last step is to listen to the stream creating a listener. As we said at the beginning of this section, a listener is just an object with a specific signature (next, error, complete), and in our case we output to the console the transformation made inside our stream.

Opening the dev tools of your favorite browser, you should see something like Figure 3- 10.

Figure 3-10. Output of XStream example, slightly different from the Rx.JS example due to the fold operator

As we can see, this example made with XStream resembles the one we did previously with Rx.JS. The key takeaway here is the fact that understanding how the observables work are helping us to switch from a reactive library to another one without investing time on learning new concepts but just applying a few basic concepts with different syntax and operators.

Our second example is based on retrieving some data from a REST endpoint every few seconds.

In this case we can leverage the power of the producer objects available in XStream for fetching the remote data and emitting the result to a stream.

Considering we want to retrieve the data every few seconds for a certain amount of times, we can use an interval stream instead of a set interval like we would do in plain JavaScript.

85

Chapter 3 reaCtive programming

This is our code example:

import xs from "xstream";

import fetch from "fetch";

const URL = "https://jsonplaceholder.typicode.com/users";

const producer = {

emitter(){

const that = this;

return {

next(){

emitUserData(listener);

},

complete(){

that.stop()

}

}

},

start(listener){

xs.periodic(5000).take(2).addListener(this.emitter())

},

stop(){

listener.complete();

}

}

const emitUserData = (listener) => {

fetch.fetchUrl(URL, (error, meta, body) => {

if(error) return;

const data = JSON.parse(body.toString());

data.forEach(user => {

listener.next(user)

}, this);

})

}

86

Chapter 3 reaCtive programming

const simplifyUserData = (user) => {

return {

name: user.name,

email: user.email,

website: user.website

}

}

const listener = {

next(user){

console.log(ùser name is ${user.name}`);

console.log(ùser email is ${user.email}`);

console.log(ùser website is ${user.website}`);

console.log('------------------------------');

},

error(){

console.error("stream error");

},

complete(){

console.log("stream completed");

}

}

const userStream = xs.create(producer).map(simplifyUserData);

userStream.addListener(listener);

As you can see in the example above, we start defining our producer object; remember that a producer is just an object that requires two methods: start and stop.

The start method will be called once the first consumer subscribes to the stream.

Keep in mind that a producer can have just one listener per time; therefore, in order to broadcast the results to multiple listeners, we have to create a stream that uses the producer to emit the values.

Our producer contains also another method called emitter that returns a listener object that we are going to use inside the interval stream created in the start method.

The start method uses the xs.periodic operator that accepts as an argument an interval of time when an event is emitted by the stream; so in our case, every 5 seconds a new event will be emitted.

87

Chapter 3

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.