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

To help understand your stream, you’ll almost always want to log out some the intermediate values to see how it has progressed during its lifespan. This lesson teaches you how to use `do` to log values in the middle of the stream without having an impact on the rest of the stream.

[00:00] The way this is currently set up, we only see the final output once we've hit complete, and we've reduced the final score into something that gets pushed through to the onNext. I also want to see what's going on during my streams. An easy way to do that is to drop in a do operator. The do allows you to do a side effect, so something that's going to happen outside of our stream.

[00:26] We'll go ahead and console.log this data which is being pushed through, which will be this formatted timer and input object. Now when I type zero, you can see I get the count zero and the text "zero." When I hit start, you can see I get one. I'll type one, two, four, so I missed one. My final score was two. You can see that it completed.

[00:51] You can go back through and see four didn't match a text of nothing, three didn't match a text of nothing, and that my points came from one and an initial zero. You can see what happened in the stream as it went along. You can ahead and put these dos anywhere.

[01:06] If I cut this, and paste it here, and paste one here, and I hit Save, you can see we now get that initial count of zero, which we didn't get until we typed a four. I can type something, just get the letter a. I can hit start, get my objects I used to get, and type, and get that typing. Then it still counts the score and completes as expected.

[01:28] These don't affect anything inside of our stream. They happen completely outside of what's going on.

Course

Step-by-Step Async JavaScript with RxJS

Logging a Stream with Do

Share this video with your friends