Coding

mergeMap() | RxJS TUTORIAL

  • 00:00:01 welcome to this video in this video
  • 00:00:04 we're going to have a look at how we can
  • 00:00:06 merge the result the values of two
  • 00:00:09 observables in q1 using the merge map
  • 00:00:12 operator as always you can find the
  • 00:00:15 source code starting and ending source
  • 00:00:17 code for this video in a link in the
  • 00:00:20 video description and with that let's
  • 00:00:22 get started and let's find out how merge
  • 00:00:24 map actually works in the starting
  • 00:00:27 project I have a little bit of code with
  • 00:00:29 two inputs and a combined value
  • 00:00:31 paragraph but obviously nothing is
  • 00:00:33 happening here now I want to change that
  • 00:00:35 and I want to change it using
  • 00:00:37 observables so what can I do well for a
  • 00:00:41 start I want to react to whenever I type
  • 00:00:45 something into these input fields so I
  • 00:00:47 need access to them so let's use good
  • 00:00:49 old JavaScript to get access using query
  • 00:00:52 selector and then you can see that these
  • 00:00:55 inputs have some ID so I can use the
  • 00:00:57 input one idea let me bring this into a
  • 00:01:00 new line input 1 ID for the first input
  • 00:01:03 and then simply copy that for the second
  • 00:01:06 one to also replace it here and now get
  • 00:01:09 access to both inputs why because as I
  • 00:01:12 said I want to react to an event here to
  • 00:01:15 the input event so that would be the
  • 00:01:17 next step I can create an observable and
  • 00:01:20 using rx which I already do import
  • 00:01:23 observable from event I can react to
  • 00:01:27 events on that or on any element so I
  • 00:01:31 could pass input 1 this element here and
  • 00:01:34 react to the input event which is fired
  • 00:01:37 whenever the user types now doing that
  • 00:01:40 what I can do is I can subscribe to that
  • 00:01:42 of course and then the first callback or
  • 00:01:46 the first function which I passed to
  • 00:01:47 subscribe I know that I will get the
  • 00:01:50 event because they are using from event
  • 00:01:52 to constructors observable and I can use
  • 00:01:55 that event data to basically simply set
  • 00:01:58 MDD of the value of my Spanier which I
  • 00:02:02 also need to fetch because they are
  • 00:02:04 going to output my values so span using
  • 00:02:06 document query selector and other span
  • 00:02:10 element set it to whatever I typed so I
  • 00:02:14 could
  • 00:02:14 simply say span text content equals
  • 00:02:19 events targets that will be the input
  • 00:02:22 which fire the event so where the user
  • 00:02:23 disk type something and then target
  • 00:02:26 value to get the value of that input if
  • 00:02:29 we hit enter and we type something into
  • 00:02:30 the first input here you see that we log
  • 00:02:34 it here in our combined value field
  • 00:02:37 however it's not really a combined value
  • 00:02:39 of course because the second input
  • 00:02:41 doesn't do anything now clearly we can
  • 00:02:45 also create a second observable so let
  • 00:02:48 me quickly do that here ops to where I
  • 00:02:52 listen to you the same event on the
  • 00:02:54 input queue and now if I hit control
  • 00:02:57 later I can type something here and I
  • 00:02:59 update the span and I can't have
  • 00:03:01 something here and I will overwrite that
  • 00:03:03 value in the span because now I have two
  • 00:03:06 data sources two inputs with two
  • 00:03:08 observables listening to the input event
  • 00:03:10 which will basically change the text
  • 00:03:13 content of that span that might be the
  • 00:03:16 behavior you're looking for but now I
  • 00:03:19 want to merge both observables to get a
  • 00:03:21 combined value and we can do that merge
  • 00:03:25 with the merge map operator merge map
  • 00:03:29 will take an outer observable and then
  • 00:03:32 merge an inner observable into it and
  • 00:03:35 whenever the inner observable then emits
  • 00:03:38 a value it will also take the value of
  • 00:03:41 the outer observable into account to
  • 00:03:43 give us a combined value sounds
  • 00:03:46 complicated let's see in action first of
  • 00:03:49 all I'll remove the subscription both
  • 00:03:51 observables because I don't need it so
  • 00:03:53 for now I only got two observables here
  • 00:03:56 and nothing else
  • 00:03:58 both observables fire on the event but
  • 00:04:00 we don't subscribe to any of them so
  • 00:04:03 what I want to do as a next step is I
  • 00:04:05 want to merge the let's say second
  • 00:04:08 observable into the first one so I can
  • 00:04:11 say opps one merge map that's the
  • 00:04:15 operator I'm gonna use now merge map
  • 00:04:18 here will receive a function as an
  • 00:04:21 argument and this function first of all
  • 00:04:23 gets the value of the observable we
  • 00:04:26 is merge map on so in this case that's
  • 00:04:29 the value of observable 1 or since we
  • 00:04:32 know that this will actually be the
  • 00:04:34 event object we can also name this
  • 00:04:36 parameter event 1 but again it will
  • 00:04:38 always be the value of the first
  • 00:04:39 observable now and the function body and
  • 00:04:43 I will use curly braces I have to return
  • 00:04:47 another observable so let's return
  • 00:04:50 observable 2 now that alone won't do the
  • 00:04:53 trick because I want to combine the
  • 00:04:55 values of the second of the first
  • 00:04:56 observable so what I can do is I can
  • 00:04:58 call normal map operator on observable
  • 00:05:01 map on observable 2 and here I know I
  • 00:05:04 get the event object of the second
  • 00:05:07 observable since we always use from
  • 00:05:08 event here we know it will be a in an
  • 00:05:10 event object so now here in the map
  • 00:05:14 operator on the second observable I can
  • 00:05:18 combine event 1 target value and let's
  • 00:05:22 say a white space plus event queue
  • 00:05:26 target value why can I do that let me
  • 00:05:31 bring this into a new line to make it a
  • 00:05:32 bit easier to read
  • 00:05:33 why can I return event one target value
  • 00:05:37 plus some white space plus event to
  • 00:05:40 target value well keep in mind we're
  • 00:05:42 still in this function we passed to
  • 00:05:44 merge map so we're still in this
  • 00:05:47 function here and in there we have to
  • 00:05:50 return an observable we could just
  • 00:05:52 return observable to but that wouldn't
  • 00:05:54 really do the trick because what we want
  • 00:05:56 to return in the end is a combined
  • 00:05:58 observable which combines the values of
  • 00:06:01 Q observables therefore we then call the
  • 00:06:03 map operator on observable to which make
  • 00:06:07 sure that we actually transform the
  • 00:06:10 value we get back so since we now have
  • 00:06:13 access to both the values of the first
  • 00:06:15 and the second observable it's easy for
  • 00:06:17 us to simply combine them and in the end
  • 00:06:19 would be returned is this combined
  • 00:06:21 observable so now all that's left to do
  • 00:06:23 for us is to now call subscribe on this
  • 00:06:27 merge map or after this merge map
  • 00:06:29 operator and we know that inside off
  • 00:06:32 subscribed we get a combined value and
  • 00:06:35 now we can reach out to our span set the
  • 00:06:38 text content equals
  • 00:06:39 to that combined value and his
  • 00:06:41 control-enter to load our app and now to
  • 00:06:44 type something here you see nothing
  • 00:06:46 happens but if I type something in a
  • 00:06:48 second field we get the combined value
  • 00:06:51 now why does nothing happen if I type in
  • 00:06:53 the first field because that is how
  • 00:06:55 merge map works the inner observable
  • 00:06:58 this one here has to emit in value for
  • 00:07:01 the whole observable to update and to
  • 00:07:04 emit in value and that is exactly what's
  • 00:07:06 happening here as soon as we type
  • 00:07:07 something in the second field which is
  • 00:07:09 our second observable in this case we
  • 00:07:11 emit a value on the combined observable
  • 00:07:14 so that is how you may use merge map and
  • 00:07:16 it can become handy if you have module
  • 00:07:19 data sources and you want to merge them
  • 00:07:21 into one where one of the data sources
  • 00:07:24 is the one
  • 00:07:25 well basically telling you when the
  • 00:07:27 event mission happens like here the
  • 00:07:30 inner observable