Starting a Stream with SwitchMap

Stopping a Stream with TakeUntil

Updating Data with Scan

Displaying Initial Data with StartWith

Changing Behavior with MapTo

Handling Multiple Streams with Merge

Refactoring Composable Streams in RxJS

Getting Input Text with Map

Combining Streams with CombineLatest

Adding Conditional Logic with Filter

Completing a Stream with TakeWhile

Handling a Complete Stream with Reduce

Logging a Stream with Do

Timer and Input Recap

Refactoring CombineLatest to WithLatestFrom

Resubscribing to a Stream with Repeat

Basic DOM Rendering with Subscribe

Sharing Streams with Share

Step-by-Step Async JavaScript with RxJS

This lesson shows why it’s preferable to using `withLatestFrom` instead of `combineLatest` in certain scenarios.

https://app.egghead.io/api/v1/lessons/rxjs-refactoring-combinelatest-to-withlatestfrom/subtitles

[00:00] You may have noticed that if I start the timer -- I'll use quarter so it goes faster -- that it goes way beyond that limit of three until you type something in the input box, and then it finally completes. That's because combineLatest is waiting for something from the timer stream and the input stream before it gets any further along in the stream.

[00:21] One way to think about the solution is to use combineLatest from the instance of the timer instead of creating a new observable from it. If I pace that there and remove the unnecessary comma, we're now seeing combineThisTimer. We'll move do to a next line and we'll move combineLatest and we'll indent everything else.

[00:45] We have a timer which is combining with the latest input, and then formatting it, and then moving on. But this is just the exact same results, so if I start the timer and you see it gets past three and it doesn't stop until I type.

[01:00] Maybe if we move the takeWhile up in front of the combineLatest, we'll paste that there thinking that if the timer stops the takeWhile then that'll definitely trigger the complete, because takeWhile is going to complete it for us. If we try this now you'll see we'll get quarter and it'll stop at four, but it still never gets completed so it doesn't get reduced and it does not log out the complete.

[01:27] What's going on with combineLatest is that it's waiting for a complete event from the timer and from the input. CombineLatest is not going to complete until it gets a complete both from the timer and from the input and as it stands right now we're only getting to complete event from the timer using takeWhile.

[01:46] What we can do here is say, withLatestFrom, and withLatestFrom is going to behave mostly the same way. It's just the timer is going to grab the latest value from input that it gets, but it's not going to wait for input to complete to trigger that complete event.

[02:04] We'll go ahead now, I'll click on quarter. You can see that we get a complete, our score was zero, and we completed. If I type now I get no sorted output because this entire stream is complete.

Refactoring CombineLatest to WithLatestFrom

Share this video with your friends

Course

Step-by-Step Async JavaScript with RxJS