Combining Streams with CombineLatest
Two streams often need to work together to produce the values you’ll need. This lesson shows how to use an input stream and an interval stream together and push an object with both values through the stream.
[00:00] With our input stream and this timer or interval stream both in play we can combine them together to do some pretty useful and fun stuff. Let's remove the subscription from our starters.
[00:13] We'll call this our timer stream. Then remove this entirely, since we don't need to subscribe to that either. What we want to do is combine a timer stream and an input stream to do something interesting.
[00:29] What that's going to look like is observable, combine, latest. We'll combine the timer stream and combine the input stream. Then we'll just subscribe to see what that gives us. Let's log out our X here. You'll notice it didn't even log out anything, even for that initial count of zero that we used with the start with here.
[00:54] As soon as I type something, I'll type the letter A, you'll see that we get A as the second item in the array, and the first item is an object that has a count of zero. The latest thing from the timer stream is that initial start with object, it has a count of zero. The latest from my input stream, which is the event target value, is the letter A.
[01:18] If I type B, you'll see we'll now have that same start with object, and then A, B. If I begin a timer you'll see that we now get A, B, and a continuous stream of objects. I'll type C. You see we get A, B, C. All of these will have the counts on them. Count 8, between 9, 10, 11, 12. I can add a D. We're getting both of these combined into an array.
[01:47] Because this combine latest is pushing data through as an array, if I wanted to get this data out in another format, you could take that array, and then return it as an object. Remember, if you use an arrow function, you need to wrap that object in parens.
[02:02] The count would be array zero.count. Then the text would be array one. Now, if I log this out, and I type in A, you can see we get an object with a count of zero, and a text A, B, count of zero, text of A, B. When I hit start, you'll see the count will continue going up and the text will change. Now we can build a pretty neat game out of this.
[02:29] Because this mapping is such a common thing to do when combining two streams, you can actually parse a third parameter into combine latest. We'll spread this out a bit. This third parameter will be a mapping function. We'll cut this and paste it here, and delete that map line.
[02:47] The data in here does not come in as an array, it actually comes in as two parameters, the timer, and the input. Instead of "array.count," we'll say "timer.count." Instead of array one, we'll say input. Now, when I hit save, we get the same behavior as if we were using the mapping function in the next line.
Yes, you can think of an Observable as being an array of indeterminate length, whose values are delivered one at a time, over time, instead of all at once. In both cases, map does the same thing: it transforms each value somehow to populate a new array. But since the original array is delivered over time for an Observable, so is the mapped array.
at first I didn't understand the semantics of map here and in the previous example. Map in Rxjs is similar to the Array.prototype.map, but the former treats the whole observable as an iterable, whereas the second treats an array as iterable.