Name: Use the map operator instead of firing events on a Subject
Uploaded: 2017-02-17T12:11:52-06:00
Description: In this lesson we will learn how to replace excessive subscribing and Subject emissions with simple uses of the map operator, simplifying our code and making it less bug-prone.

Convert RxJS Subjects to Observables

Replace Observable.create with Observable creation helpers

Use takeUntil instead of manually unsubscribing from Observables

Convert an underlying source of data into an Observable

Use the map operator instead of firing events on a Subject

Use flattening operators instead of nested subscriptions

Use switchMap to avoid leaks when flattening

Replace zip with combineLatest when combining sources of data

Move important side effects from do() to subscribe()

Implement pause and resume feature correctly through RxJS

Know when to extend the Observable class

Make Observables hot only where necessary

Save time avoiding common mistakes using RxJS

In this lesson we will learn how to replace excessive subscribing and Subject emissions with simple uses of the map operator, simplifying our code and making it less bug-prone. 

https://app.egghead.io/api/v1/lessons/rxjs-use-the-map-operator-instead-of-firing-events-on-a-subject/subtitles

[00:00] Whenever you see a next method inside a next callback when subscribing, then something is wrong. I can't imagine a case where you need this. What's going on here is that we have subject for X coordinates. Whenever a click happens, we want this subject to emit the X coordinate of that click event.

[00:21] The way that we're achieving that is by listening to clickstream. We can get those vents of clicks. We feed the client X property into the subject with .next. Now, we have a situation here which data's coming from the clickstream and it's going to the X subject.

[00:42] Whenever you have the situation of source of data and then destination, that's exactly the used case for an operator -- getting data from source and sending it to some destination.

[00:53] In this case, instead of having this subject, we can make an observable of these X coordinates by using operator on the clickstream. That operator in this case is mapping.

[01:07] Usually, when you have a next inside a next, it usually means a map, although there are different cases where you might need a slightly different operator. In this case, we get the click event and we just map that to the property clientX.

[01:22] Now, I don't even need the subscribe anymore, because I don't need to get data from clicks. The only purpose of that was to send it into the X subject, but I don't need that anymore.

[01:35] We can simply subscribe to the stream of coordinates. Then we can put each of these Xs in the console log. This will work as we want it to. Each time we click, it shows the X coordinate of that event. We don't need the subject here.

[01:54] The tip here is if you see a next inside a next, then something is wrong. Remember that we're avoiding subject here, because it's less save by default where observables are often able to automatically dispose resources.

Use the map operator instead of firing events on a Subject

Share this video with your friends

Course

Save time avoiding common mistakes using RxJS