Coding

RxJS OPERATORS LIKE map() OR throttleTime() | RxJS TUTORIAL

  • 00:00:01 welcome to this video great to have you
  • 00:00:04 on board you're already seeing this
  • 00:00:06 stream diagram where we can depict how
  • 00:00:09 an observable emits values and how we
  • 00:00:12 use these values in an observer
  • 00:00:14 something I had a closer look at in this
  • 00:00:16 video here now that's great but the even
  • 00:00:19 better thing about observables
  • 00:00:21 besides the nice structure is that they
  • 00:00:23 have this funnel-like approach where we
  • 00:00:26 can pass the values which are emitted
  • 00:00:28 through as many operators as we want
  • 00:00:32 before they finally reach the observer
  • 00:00:34 so you might have our first operator
  • 00:00:37 maybe the map operator which will simply
  • 00:00:40 turn our values and you transform values
  • 00:00:44 the logic for the transformation lives
  • 00:00:46 in the map function then so maybe we
  • 00:00:49 transform a number to a string object
  • 00:00:51 into a simpler object or whatever we
  • 00:00:53 need
  • 00:00:54 now these transform values could again
  • 00:00:57 reach the next function now but maybe we
  • 00:01:00 want to chain another operator really
  • 00:01:02 using that funnel-like approach what we
  • 00:01:05 can do that maybe we have to throttle
  • 00:01:07 time operator which make sure that no
  • 00:01:10 more then one value can reach the next
  • 00:01:13 function per well window-frame here so
  • 00:01:17 for two thousands in this case so the
  • 00:01:20 first value here would reach next but
  • 00:01:24 the second one what maybe because not
  • 00:01:26 enough time passed between the two
  • 00:01:28 values maybe here two seconds were
  • 00:01:31 passed to dip path since the last value
  • 00:01:33 so this value will make it the next
  • 00:01:35 value won't but maybe now we again have
  • 00:01:37 more than two seconds in between so that
  • 00:01:39 value might also make it this is my
  • 00:01:42 operators are great in the end in the
  • 00:01:45 next function we know exactly what we'll
  • 00:01:48 get because we did change these
  • 00:01:50 operators but we can ensure that we only
  • 00:01:53 get what we want to get by transforming
  • 00:01:56 and controlling the values just as we
  • 00:01:58 need it let's see this in an example now
  • 00:02:01 I'm on jsfiddle here I added a script
  • 00:02:03 import using the rxjs CDN link which you
  • 00:02:07 can get on the install it page on
  • 00:02:09 reactive X of I o /r X chairs at the
  • 00:02:12 very bottom this link remove
  • 00:02:15 at version and hit enter to get the
  • 00:02:16 latest version and then just bad link
  • 00:02:19 now that's all what I'm starting with
  • 00:02:21 and now I want to create a simple
  • 00:02:24 observable because in this with you I
  • 00:02:26 don't want to focus on the observable I
  • 00:02:27 want to focus on the operators so the
  • 00:02:30 observable I will use here is or the way
  • 00:02:33 of creating observable it's chosen from
  • 00:02:35 the list of methods we have for creating
  • 00:02:39 new observables quite a lot I use create
  • 00:02:42 in another video now I want to use
  • 00:02:44 interval this one here now interval will
  • 00:02:49 simply emit a new value every X
  • 00:02:51 milliseconds with X being passed as an
  • 00:02:55 argument so I can simply say wire
  • 00:02:58 observable of course you could choose a
  • 00:03:00 different name is rx observable and then
  • 00:03:03 interval and I will pass one year or
  • 00:03:07 1000 to be precise so one second that we
  • 00:03:10 get a new value every second now what
  • 00:03:13 value do we get simply an ascending
  • 00:03:15 number of integers so 1 2 3 and so on
  • 00:03:19 some of the incrementing numbers that's
  • 00:03:22 the observable now I want to subscribe
  • 00:03:23 to that and I'll create an observer for
  • 00:03:25 this and that observer here is simply as
  • 00:03:28 we learned in an average it you just a
  • 00:03:31 JavaScript object and we can implement
  • 00:03:33 next error or complete this specific
  • 00:03:36 observable here we'll never complete it
  • 00:03:39 will run infinitely and it will never
  • 00:03:40 throw an error so I can just implement
  • 00:03:42 it next method here I know that in the
  • 00:03:45 next method I do get the value and I
  • 00:03:47 simply want to lock the value so what I
  • 00:03:50 can do with these two pieces defined is
  • 00:03:52 I can now use the observable called
  • 00:03:55 SUBSCRIBE method which is provided by
  • 00:03:57 the rxjs package and pass my observer
  • 00:04:00 and with the console being open if I now
  • 00:04:02 hit control enter we see 0 1 2 and this
  • 00:04:07 keeps on increasing every second and it
  • 00:04:09 won't stop now that is my observable
  • 00:04:13 setup here now let's use operators we
  • 00:04:16 change these operators before calling
  • 00:04:19 subscribe so I will move subscribe to a
  • 00:04:22 new line but still call it on well
  • 00:04:24 whatever else a chain here and the first
  • 00:04:27 thing I want to change actually is
  • 00:04:28 map we saw that on the slide before and
  • 00:04:32 map transforms the value the observable
  • 00:04:36 emits actually map will give us back a
  • 00:04:39 new observable but this observable will
  • 00:04:42 holds the transformed L data why does it
  • 00:04:45 give us back a new observable it has to
  • 00:04:48 because subscribe in the end and we can
  • 00:04:49 only call subscribe on observables so
  • 00:04:53 map takes a function as an argument this
  • 00:04:57 function will hold the logic we use for
  • 00:04:59 transforming the value so here we know
  • 00:05:02 we get the value because that is what we
  • 00:05:04 plan on changing that was what our x
  • 00:05:06 chairs will give us here and in the body
  • 00:05:09 we may do whatever we wanted you with
  • 00:05:13 that value and then call subscribe on
  • 00:05:15 what we return in the end so here I
  • 00:05:17 could simply return value times 2 and I
  • 00:05:22 simply return the number here so that
  • 00:05:24 will be an integer but again rxjs will
  • 00:05:28 automatically create a new observable
  • 00:05:31 which emits this transformed number as a
  • 00:05:34 value so that subscribe will work with
  • 00:05:37 that if I clear the console and hit
  • 00:05:39 control enter to start a new iteration
  • 00:05:41 we start at 0 but then we get q4 and so
  • 00:05:45 on so we get our doubled value that's
  • 00:05:48 the map operator working and we could do
  • 00:05:51 whatever we want we could hard code
  • 00:05:53 something totally different here like
  • 00:05:55 hello if I now clear doesn't hit ctrl
  • 00:05:58 enter well we get hello all the time
  • 00:06:00 because we don't care about the original
  • 00:06:02 value which would have been a number we
  • 00:06:05 always return hello that's the power of
  • 00:06:07 the operator now just returning hello is
  • 00:06:11 boring I will return this is number or
  • 00:06:14 just number and then the value to have a
  • 00:06:17 little prefix in front of my numbers so
  • 00:06:19 now if I clear this and hit control
  • 00:06:21 enter again we see number 0 1 and so on
  • 00:06:25 now let's change another operator again
  • 00:06:28 before subscribe to have an effect and
  • 00:06:31 then this could be the well let's stick
  • 00:06:35 to the one we saw on the slide throttle
  • 00:06:37 time here I
  • 00:06:40 have to pass a number as an argument
  • 00:06:41 this number defines for how long I want
  • 00:06:45 to wait so here I could say aatul two
  • 00:06:49 seconds now since we do emit a new value
  • 00:06:52 every second and we wait for full two
  • 00:06:55 seconds to pass before we accept a new
  • 00:06:58 value we should actually skip two values
  • 00:07:01 at a time so let's see that we start at
  • 00:07:04 zero which makes sense but then the next
  • 00:07:06 value is free which makes sense because
  • 00:07:08 one and two were skipped because when we
  • 00:07:11 omit the second value two seconds are
  • 00:07:13 not quite finished but right thereafter
  • 00:07:15 they are so we see every third value we
  • 00:07:18 could say because we wait two seconds if
  • 00:07:20 it would decrease justice to 1900 you
  • 00:07:24 will see that we see every second value
  • 00:07:26 so now if I hit control enter here we
  • 00:07:29 see zero then we see two and we four and
  • 00:07:32 so on
  • 00:07:33 so datas throttle time and math now
  • 00:07:36 combined and that is how we can use that
  • 00:07:39 funnel-like structure to apply any of
  • 00:07:42 the operators we want and have a look at
  • 00:07:44 the official documentation at the
  • 00:07:46 observable docs here to get a full list
  • 00:07:48 of all operators there are quite a lot
  • 00:07:51 to really control to get what we want
  • 00:07:54 and I will create more videos on more of
  • 00:07:57 these operators more interesting ones
  • 00:07:59 and interesting combinations of these
  • 00:08:01 operators no worries but I hope that
  • 00:08:04 this already clears up some of the
  • 00:08:06 confusion and shows how powerful
  • 00:08:08 operators and this funnel-like approach
  • 00:08:11 are see you in our videos hopefully bye