Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Refactoring CombineLatest to WithLatestFrom

    John LindquistJohn Lindquist

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

    rxjsRxJS
    ^5.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss