Steaming from mouse Events
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
The above will create a click event stream.
The code below will map that click stream into a subscribableurl stream, meaning every subscribable click will map to a subscribable URL request stream.
The click stream will contain all clicks, and all clicks are mapped to url values.
var requestStream = refreshClickStream
.map(function() {
var randomOffset = Math.floor(Math.random()*500);
return 'https://api.github.com/users?since=' + randomOffset;
});
Merging streams
Lets say you have a stream for click url requests (as we did previously), and a stream for the startup url requests, which is subscribed to seperatly.
The stream for the startup url requests looks as follows:
var startupRequestStream = Rx.Observable.just('https://api.github.com/users');
And lets say you want to subscribe to both the click url requests & the seperate startupRequestStream , and log all requests into the console, regardless of which request was made.
One way to achieve that is to pass the same functions to both subscription, where the console function will be called.
The correct way is to merge both subscriptions into a single stream (observable) of both of the url subscription (startupRequestStream & refreshClickStream).
Example:
var requestStream = Rx.Observable.merge(
refreshClickStream, startupRequestStream
);
Now we have a single stream that will emit on both the refreshClickStream & startupRequestStream Observables.
Data architecture using observables and services
In a reactive application Services play 2 roles:
1. Provide streams of data that our application can subscribe to
2. Provide operations to add or modify data
At a high level, the application data architecture is straightforward:
• The services maintain streams which emit models (e.g. Messages)
• The components subscribe to those streams and render according to the most recent values