RxJS Observables Crash Course

hey what's going on guys this mini-course is going to be an introduction to rxjs and reactive programming so rxjs stands for reactive extensions for JavaScript reactive extensions or reactive X is a library for working with asynchronous data streams and observables alright all the content in this video is covered much more thoroughly in the full course available from edge wanax so if you like this video I would strongly suggest checking that out and I'll leave a link in the description so what is reactive programming most of you have probably already worked with it ok you just don't know it yet if you've worked with angular 2 rxjs and observables are pretty big part of that all right so if you google reactive programming you will find some information but a lot of it is really vague or theoretical or too complicated so the purpose of this edge Ronix course in this video is to give you some really some solid practical examples all right so reactive programming is a programming paradigm that works with asynchronous data streams and these data streams can come from or be created by many different things so things like UI events like clicks or key presses HTTP requests file systems array like object strings and even your machines memory and cache ok these things can be turned into or can be viewed as a data stream so a stream is defined as a sequence of ongoing events ordered in time and there's a few things we can get from a stream so we can get the data that it emits which could be virtually anything and any kind any type of data we can get errors if something goes wrong and then we can get a signal that notifies us when it's complete if in fact it does complete some of them don't so if we look at this image right here represents a stream so we start with some kind of event indicates an event with some kind of value for example coordinates of a click all right so moves along the stream if something goes wrong it can send off an error which can notify we can have our application react to that our ok and then it keeps going and it can send off a signal when it's complete now some streams won't complete for instance most movements you can get a stream from most movements and obviously those don't complete they're just going to keep going as long as you move the mouse whereas something like an HTTP GET request you're going to get the data it's going to come through in the stream and it's going to complete now the way that we work with these streams is with what's called an observable so observables are used to watch these streams and they'll emit a function when the value is emitted or an error or a complete signal is returned so observables can be subscribed to by an observer and there's no limit to how many subscriptions and observable can have so we can interact with these data streams as if they were just a regular array we can use array like methods and we have a whole bunch of operators that will allow us to manipulate the data pretty much however we want so right now we can't just use standard JavaScript es5 or even es6 to work with observables and streams and reactive extensions is what allows us to do that which is also sometimes called reactive X all right so it's a library for composing asynchronous programs by using observable sequences and it provides us with a long list of operators which allow us to filter select transform combined and compose observables now reactive extensions is not limited to just JavaScript if you look at this list you can see that it's available for many of the popular programming languages of all types now the reason I chose JavaScript and rxjs is because javascript is a well-known language the rxjs library is pretty stable and goes in-depth in terms of what you can do with it and also that's JavaScript is happens to be what I specialize in so that's what we'll be using throughout this video and throughout the reactive extensions course alright so before we get started let's just take a look at exactly what we'll be covering here so I'll show you how to observe and examine asynchronous data streams that come from UI events will create observables from array like objects will create observables from scratch we'll learn how to filter and transform observables how to create observables from promises and we'll look at some of the really helpful operators that the reactive extensions library gives us and then we'll take a look at error handling all right so that's it let's go ahead and jump in and start to take a look at some code alright so we're going to start out with creating our environment and there's just a few things that I want to explain before we get started so this is the reactive X website reactive X dot IO and this is the main API for reactive extensions which is available in many different languages so if we click on choose your platform you can see all the different languages that the library is available for now we're using JavaScript so we're using rxjs now if I click on that it'll bring us to the github page and this is for it's important to note that this is for version 4 all right we're going to be using version 5 which isn't beta but it is very stable alright so the I mean the most of the API is the same but there are a few operators that have been changed in rxjs 5 but notice that version 4 is at github reactive extensions slash rxjs version 5 is at github reactive X slash rxjs and you can see this is version 5 so if you're looking for the doc for documentation this is where you want to be all right if you're if you're following along with this course now the migration guide right here says migrating from 4 to 5 if I click on that it'll just show you the rxjs for operators and what the what the version 5 operators what they've been changed to all right now as far as our environment you can just use an HTML file and include the rxjs main javascript this is a list of the CDNs now you'll see that it's broken up into different aspects but what you want to do is include if you're going to use a CDN you want to just include the RX dot all J s and notice that this is version 4 if you're following along you're going to want to choose the latest version of 5 in this case it's beta 12 all right so you just want to include one of these either the minified or the regular alright but we're not going to use a CDN we're going to be using a an environment using webpack and babel now initially I was going to go through all the steps to set that up but it was too time-consuming and I really want to just focus on rxjs and observables in them in the actual course from adju annex I do go through and show you exactly how to set it up but in this case we're going to just grab it from github alright so if you go to github.com slash brad traversée slash rxjs underscore boiler and it's pretty easy to set up okay so we just need to install our dependencies we need to compile the JavaScript of web pack and we can run it in watch mode so that it updates every time we save the file and then we just need to install live server and run it glow run NPM start so let's go ahead and do that now you can you can clone it with git or you can just download it I'm just going to download the zip file here alright and let's go ahead and open that up and then what we want to do is just create a folder to work in and I'm just going to call this our XJS sandbox alright and then we're just going to bring everything over alright and I'll go through the files really quick it's pretty simple we're using webpack along with babel now if we look at the package.json file you'll see that for dependencies we have bable bable core in bevel loader also the preset to compile from es2015 because we want to be able to use the latest javascript and then compile it down to more compatible version and of course web pack which is going to allow us to use modules and so on and then our regular dependencies of course we have rxjs and then we're also going to use jQuery so that we can easily select elements all right so that's what will be installed when we run npm install all right and then we have a web pack config file basically we're saying that our javascript file we want to work with is in the source folder fjs and when we run web pack it will compile it into the dist folder into a file called app bundle j/s and that's what we'll include in our HTML all right and then down here we're just specifying that we want to use babel and we want to use the es2015 preset all right so that's what's going on there and that's pretty much it in the source folder we have our app j/s that's the main file we'll be working with and yeah so i'm going to open up sublime text and let's go ahead and add this folder to add this as a project okay so desktop sandbox and there we go alright so in the app j/s right now we're just importing jQuery and we're also importing rxjs and then we're just doing a consult log so let's go ahead and run npm install so i'm going to open up a command line okay or open up your command line or you went your linux terminal Mac whatever you're using and let's navigate to that folder all right and we're going to go ahead and run npm install and of course you need to have no js' installed if you don't just go to node.js org and go ahead and download and install it all right so you can see that it created the node modules folder and it's now installing the dependencies alright so now that that's done we're going to we're going to compile our JavaScript or we're going to run web pack in watch mode so let's run web pack - w and what that will do is take that app.js file and compile it into the dist folder okay so if we look now we have a dist folder with app bundle J s so that's the file that is being included in the index file if we open that up you'll see it's being included right here now we're also going to want to install live servers so that we can run this in a server environment so I'm going to open up another command line okay let's navigate to that folder okay and let's install live server globally so NPM install live server - gee all right so now we should be able to simply run NPM start and that will open up the localhost port 8000 all right you can see we're getting our index page and if we open the console with f12 you see that we have our XJS boiler running so everything is now set up and we're ready to start to code with rxjs alright guys so the first thing we're going to do is we're going to create an observable sequence from UI events okay a couple different types of events so first thing I'm going to do I have my app.js file open and my index.html I'm going to create a button all right I'm going to get rid of this and let's say button and we'll give it an ID of BTN okay we'll say click save that and live server will automatically reload which is nice alright and we can get rid of this console log and first thing we want to do is create a variable for that button so I'm going to say Const BTN equals and this is where a jQuery comes in we want the ID of BTN okay now what we'll do is create a variable for the observable and for the first stream so let's say Const and we'll call it BTN stream money sign now the money sign isn't required but it is good practice that way you know which of your variables is an actual observable and represents a stream all right so we're going to set that to our X dot observable and then we're going to use the from event operator alright now this is going to take in a couple parameters first one is going to be the actual element so BTN and the next one will be the type of event we want which is going to be a click in this case alright so that's all there is to creating an observable ok we're creating it from the event now what we need to do is subscribe to it ok you need to subscribe to observables so we're going to say BTN Stream money sign dot subscribe alright and then in here it's going to take in three functions one is going to be to return the stream of the data in the stream the next one will be to return any errors if there are any and the last one will be will run when it's completed if it does complete so let's go ahead and put function and just going to put this on another line alright now we can pass in whatever we want for a variable here I'm going to use e for event and then what we'll do is just console dot log and for now I'm just going to console.log clicked alright and then we're going to have another function which will take in ever and this will only run if there's some kind of error okay we just want to console log it and then the last one is for when it completes and we're just going to console dot log and I'll say completed alright so let's go ahead and save that and that should reload and then if I click on it you'll see we get clicked ok now obviously this isn't very helpful so what we want to do is pass in that eval you alright so let's save that and now we click and you can see what we get this this large object that has all these values alright so you can kind of look at you can look at elements as having their own little mini database ok with all these different values so you can see we have the timestamp we have the original event which if we open that has a whole bunch of other stuff if the target can see we can get the the element and its ID we can get the class name there isn't one but if there was we could get that we can get the client height client position the innerhtml which is the text of the button the ID we can get all this stuff so for instance if we want to get what's in the inner HTML we can say e dot target dot inner HTML and we'll save that and you can see now we're getting the click alright if I was to change that to click one and click we get click one all right so just a way to get some of these event values so now what I want to do is use a different of kind of event so let's create an input box a text box okay so put let's just put a HR tag there and then we'll say input type equals text and we'll give it an ID of input okay and whips don't want to do that all right and then what we'll do is in our app J s so let's create a variable called input and we're going to set that equal to jQuery and we want the ID input all right and then what I'm going to do is just copy this this button stream and let's change it to input stream and change this value to input and then we're going to change the actual event to key up all right and then down here we'll replace that with input okay now I should mention that the only required the first function here is the only required one we don't need to do the error we don't need to do the completed all right and you may have noticed that the key of these events don't fire off completed because they don't complete you know if if you have a click event you can keep having click events it's not something that ends such as an array or get requests it's going to get some data and then complete all right it's ongoing so let's go ahead and we're going to just get rid of this target in our HTML and let's save that and now if I go and I start to type you can see that every time we type a character it brings up that event ok so this is a constant stream of data now if we want to let's say we want to get the actual values being typed in we can get that from current target and value or is it right here value all right so let's do that we'll say console.log e dot current target dot value and we'll save that and now you'll see that as I type it'll give us the value down in the console all right and we can actually get this from a target value too all right so we're getting a constant stream that is giving us whatever we type into the input box and of course if we wanted to we could output that in the browser window in the body so if we create an div here and let's give it an ID of output okay we'll save that and then we'll just create a variable for it and then down here let's say output dot append okay so now we're using jQuery and we'll pass in a dot target dot value so let's save that now if we go and click in here and start to type you'll see that it's going to output in the browser all right so this works similar to how angular 2 works with its data binding so there's one more event that I want to show you and that's the mousemove event so let's go ahead and grab this and let's change it to will just say move stream and change this to document because I want this to work on the entire document and then we'll change the event we're going to change that to mouse move all right and then down here let's just keep that as is actually no we don't want to keep it as is let's do output dot append and we want the x and y values so we'll say X and then we'll concatenate onto that e dot client X all right and then we'll say Y and then client Y all right so if we save that and I go in the document it's all we need to change this to move straight and it should be a dot client why so let's save that and now as I move around you'll see that to capture my coordinates now I don't want this to just keep adding to it I want it to replace it every time it gets those values so let's change I'll put a pen to output I will say output dot HTML and we'll add an h1 around these alright so if we save that now when we move around you'll see that it outputs in the browser so it's a constant stream giving us the this data this X&Y coordinates all right so that's how we can create observables from events alright so now that I've showed you how to create observables for events now I'm going to show you how to create them from array like objects all right so I've cleared everything out and I will be I will post the files on github and I'll add a link in the description but I just clue I cleared out everything from there and also the index.html alright so what we're going to do is we're going to create a simple array of numbers all right so we have these numbers and we want to create an observable sequence from these numbers so let's say Const we'll call this numbers money sign and set this to our X dot observable and we're going to use the from operator all right and then we'll just stick in their numbers all right so we want to subscribe to this observable so let's say numbers money sign dot subscribe and in the last video we just used our callback functions now I'm going to show you how to use arrow functions which is just a different way to to add these callbacks all right so let's say for the the actual values we'll use V and we'll set that to Eero function - a code block all right it's all preference you can do the other way or you can use the arrow functions so we'll say console dot log V alright and then for the next one we'll say error set that console dot log error whoops alright and then for our complete this console dot log and we'll just put in the string completed all right so let's go ahead and save that and see what happens so you'll see that it's taking that array and it's outputting as an observable sequence now notice with this one we're actually getting completed we didn't get that with from event because the the events don't stop this however is just a static array when it gets to the end it's going to run the completed all right now usually you'd probably be working with some kind of data source that that outputs Jason are an array of JSON objects so let's do that I'll say Const post and we'll set that to an array and say the posts have a title and a body all right we'll add a couple more of these all right so we have these posts and then we're just going to say Const we'll do post money sign equals our X dot observable dot from and we'll paste in here or we'll type in here posts and I'm just going to copy this and change that to posts and if we go ahead and save that we're going to get the objects okay which have a title and a body all right now if we want to output this up here we can do that pretty easily let's do will say ul will give it an ID of posts all right and that's it we'll save it and then over here we'll go down and we can even make this a little more descriptive and say post and then let's do the ID posts and say dot append and here we'll put our allies let's do post dot title all right and actually we'll wrap that also in an h3 all right and then after that let's put a paragraph and then we'll just concatenate in there post dot body all right so let's save that and whoops we need to change that and there we go so now we're grabbing the objects and we're out putting the the title on the body of each post now we're not limited to just standard arrays we can even use sets and maps so let's just comment all this stuff out all right and let's create a set now a set is basically an array that can have any type of data it can have strings or numbers or objects so let's say Const set and we'll set it to new set and let's pass in here some brackets and we'll put in a string put in a number and put in an object all right and then we can create a stream from that I'm actually going to just copy this alright let's change this to our set stream it will pass in set change that and let's get rid of this line and we'll just console.log that and I'm just going to change this back to V alright so let's go ahead and save and now you can see we get our string our number and then our object and it also fires off completed so that's how you can create an observable from a set you can do the same with map and a map is basically an array of key value pairs so I'm going to just paste this in and we'll change this to map change that and inside our brackets we'll set another pair of brackets we'll say 1 2 3 4 and 5 6 ok we'll change this to map and save and now it outputs our key value pairs so that is the from operator all right so we've learned how to create observable sequences from events and from array like objects now I'm going to show you how to create an observable from scratch so I've cleared everything out and we're going to create a variable called source money sign and we're going to set that to new rx dot observable all right and then we're going to pass in here I'm just going to use arrow functions here we're going to use an observer all right and then let's just do a console dot log and we'll just say creating observable all right so let's leave that for now and subscribe to it so source dot subscribe all right and we're going to pass in here let's say we'll use X console.log X and let's do the other two and complete okay so let's go ahead and save that all right so we get creating observable now this is just console logging we're not actually emitting values yet so if we want to emit a value then we need to take that observer and call dot next alright and if you've ever used a JavaScript generator function this is pretty similar so let's say observer dot next and we'll just say hello world all right so let's go ahead and save that and you can see that we're now emitting hello world if we want to emit another value from the stream will say observer dot next and we'll say another value save it and we get another value now just to show you that this is in fact a stream that is constantly open let's do a timeout we'll do set timeout and pass in here just an arrow function and we'll do observer dot next and we'll say yet another value and let's set the timeout here to three seconds so 3,000 milliseconds and we'll save it so we should get the first two values and then three seconds later it emits yet another value so you can see that it's a it's an open stream now notice that we didn't get the completed and the reason for that is because we actually have to make the observer complete so we're going to go right under the last next we did and say observer complete and we'll save that okay three seconds later we're going to get that value and then it completes now if I were to put this complete outside of the set timeout it would complete before this run so you want to make sure if you do something like this you want to complete at the right at the right place so now errors if we want to let's say have some kind of conditional and if it fails we want to set an error so we could say observer dot error and in here we'll say new error and you can put whatever you want here to output will just say error and we'll say something went wrong all right so if we save it you see we get our error now notice that it doesn't complete when our error shows up it just just kind of stops now if we want we can make this a little more user-friendly and we can add down here dot catch and we can pass in here error and we'll set that to rx dots observable and use of now what of does is it just takes whatever you pass in and use in sets that as an observable all right so it just takes in arguments and fires it off as an observable so we're going to pass in an error all right so now if we save that we get our error but you can see that it does in fact go on to complete all right so just a more friendly way of handling things handling errors so that's how you can create a observable from scratch alright so now I'm going to show you how to create an observable sequence out of a promise okay a promise basically represents the eventual result of an asynchronous operation okay so it does something and then it can get a return of value and it can return at a later time using dot then so let me just give you an example of a really simple promise so we'll say Const my promise and we're going to set that to new promise and in here it'll take in a callback I'm just going to use an arrow function so it'll take resolve and reject all right and then let's just do console dot log and it'll say creating promise and we want to run resolve and then return out value so what I'm going to do is just do a set timeout okay so usually you would have some kind of asynchronous operation happen but we're just going to set a timeout and then we're going to call resolve and we're going to emit some kind of value we'll just say hello from promise all right and we'll set the timeout to three seconds so there's a very simple promise now we could get it by saying my promise dot then all right and then inside then little console dot log X so it works very similar to an observable so let's save that and creating promise in three seconds we should get hello from promise all right now if we want to take this and return as an observable let's let's comment this out and we'll do Const source our X dot observable and then we want to use the from promise operator all right and then we can pass in my promise so now let's subscribe to it don't say source dot subscribe and let's just do console dot log X okay so let's save it and then we should get the same result okay three seconds later we get hello from promise all right so let's do something a little more useful what I want to do is I'm going to send it an ajax request to the github api to get some information on a user so I'm going to first create a function called get user alright and this is actually from the edge' wanax course this is going to be a much lighter version of that in the course we actually create a kind of a mini application and make it look really nice but this is going to be just really quick so I'm going to say get user username and then we want to return we're going to use jQuery and use the Ajax method here and let's pass in a URL which is going to be HTTP API dot github.com slash users slash and then we'll just concatenate the user name alright and then we also want a data type alright and since we're on a different domain we're going to use JSONP as our data type now we want this returned as a promise so we can use dot promise and now let's go down here and we're going to say Const so let's not even put it in a variable we'll just do our X dot observable dot from promise okay and we're going to pass in here that function get user all right and for the username we'll just pass in my username all right and we can actually just subscribe to it like this I've been using variables but you can do it this way so we'll say dot subscribe and let's do console I'm not console we want to do X let's see X and then console dot log X all right so let's see what that gives us we'll save it and you can see we get this object it has data and data object and meta so if we open up data you can see that we're getting all this information about this github user and we can grab this and put it in our HTML if we want so let's do I will say h1 give it an ID of name and let's say we want to get let's see we'll get the the blog URL right here so we can do we'll say ul Li with the ID of blog and then let's also get the public the number of repos so we'll put an li give it an ID of repos all right so let's go ahead and save that and then in our app J s we'll go down here and let's do what was that name and we'll say dots text and we want that x value and then it has a data object so we want to say dot data and then dot name all right and then we'll do the blog so that's data dot blog and then the public repos all right and let's just add some text in here to will say public repos all right so save that and there we go so we're pulling out the name we're pulling out the blog URL and that should actually be public repos public underscore repos all right now let's do something a little more interesting we're going to create an input form where we can change the user name and have that output I'll put the result as a stream so we'll go to our HTML and let's put in up here and input give it a type of text and an ID of input all right so I'm going to go right above this and we're going to create a variable called input source okay we'll set that to our X dot observable and we're going to use from event okay and for the selector we'll just use our jQuery here and say input and then the event itself we're going to do key up all right so now let's subscribe to that all right and in here we'll go like that and then we'll just copy this or we'll cut it rather and paste it right in there and then instead of passing in just a static username we're going to pass in here e dot target dot value so whatever we type in the input now I do want you to note that doing this this double subscribe here and here isn't really the way you want you would want to do this you want to use something like merge map or switch map but I'm not going to get into that now so for now we're going to leave it like this alright we'll do that later so let's go ahead and save that and now as I type it should fetch the data wait a minute he is not defined oh let's change that to E all right so save that and then I put a B in and that's what's going to come back for the username B from the github API if we put Brad and that's Brad pitcher we get and as I type mine when we get to it my name shows up all right so it's very dynamic and in the full course we do this but we actually build out a nice interface that uses bootstrap that uses the Avatar and all that stuff all right so that's going to be it for promises in the next video we're going to take a look at some operators we're going to look at interval timer and range all right so we're going to take a look at interval timer and range okay and these are really helpful for just testing and just learning in general all right so we'll start with interval and what this does is it returns an observable sequence that produces a value after each period all right so let me give you a quick example so we'll create a variable called source and let's set it to our X dot observable dot interval alright and this is going to take in one parameter which is going to be the length of time between each emission all right so let's say one second 1000 milliseconds and then we'll subscribe to that okay and we're going to pass in here X and console dot log X all right so let's go ahead and run that and you can see that it waits a second then it starts firing these off from 0 up and it's going to be a second in between each emission all right if I were to change this to let's say three we'll save that and now the interval will be three seconds apart okay now this will just keep going on forever if you want to specify specify an end point we could use the take operator so we'll say take I will say take five okay we'll run it at let's do a hundred milliseconds so that'll be even faster alright so you can see that it goes from zero to four now we put five in but it only goes to four because it's zero based okay so it gets five five values and let's actually put our error and complete functions as well all right so let's try running that again and you see that we do get a completed at the end all right if we don't if we didn't use take it would just keep going it wouldn't complete all right so the next one I want to look at is timer so I'm going to just copy this whole thing and let's comment it out okay so we'll change this to timer so this will emit one particular item after span of time that we specify so let's put in here 1000 and 1000 and we'll see what that gives us okay so that's basically going to work how interval works okay we can set the time from when the page loads to when it starts so if we want to say five seconds and then the time from in between each one we say two seconds and we save that now it's not going to start for five seconds and then when it does it's going to wait two seconds in between each one all right so very similar to interval and then the last one I want to look at is range so we'll go ahead and copy this okay we'll change this to range and we don't need to take five on this because we actually set a start and stop part so we're going to say start at zero and go five five values up all right so let's save it okay and you can see that it all gets emitted at once and it completes so if we were to set the from let's say 25 and then 100 save that okay so what it does is it starts at 25 and then goes 100 from that so that gets all the way up to 124 and then it completes all right so very simple but as you'll see as we move along and if you take the course these are very valuable in terms of development testing and learning all right so now we're going to take a look at a really useful and common operator and that's map alright we'll also look at pluck which is kind of a simpler version of map so what map does is it applies a function to each item that's emitted by the source observable and it returns an observable that emits the results of the of that function okay so we can essentially take any of the data that's emitted and just manipulate it in many different ways alright so let's do a simple example here we're going to create a variable called source and let's set that to our X dot observable dot interval okay and for the interval let's say one second and then we'll take source and subscribe alright and in here let's see you know what let's some no that's fine so we're going to take that value and just console.log it okay so let's also add a take here so it doesn't go on forever we'll say dot take ten all right so save that and then it's just going to start at zero and every one second go to ten okay so we already understand that now let's say that we want to take each value and we want to double it all right so what we could do is up here we'll say dot map actually let's put it after take okay we'll say dot map and here we'll pass in V and we'll set that to a code block and actually we'll keep it on this line so we don't need a code block we'll just save V multiplied by V all right so now let's save it and we get zero one four nine sixteen so what actually I said double but we're actually multiplying it by itself all right if we wanted to double it then we would times it by two and we get we should get two four six eight so on alright so we can manipulate the data however we want all right let's take a look at an example that's not math all right so let's say Const source is going to equal rx doc observable and let's do from okay so we're going to do it from an array so I'm going to pass in just an array of names John Tom and Sean okay so we have these names and let's stop it there and then we'll just subscribe to it okay we'll just pass in V and we'll just do console dot log V okay so obviously that's just going to give us this this array of names as an observable sequence now let's say we want to make all these names uppercase so what we could do is add on to it dot map and let's set the and we'll set it to V dot to uppercase all right let's save it okay so it will reload and now you can see that all the names are uppercase now we're not limited to just having one map we can add as many as we want so let's add another one and in this one let's just add the text I am before each name so we'll say map V and let's set that to a string we'll say I am and then we'll concatenate on V okay so save that and now we get I am John Tom and Sean alright so we can have as many maps as we want alright let's take a look at another example I'm going to use the github function that we used in the promises section so I'm going to paste this in so we have our get github user returning a promise we're using from promise and we're subscribed we're getting this user okay so let's see what that gives us okay so it just gives us an object which has a data object which then has the user information all right so if we wanted to we could add a map here so if we say dot map and then we'll say user and we could set that to user dot data and that way you could actually get rid of that data object so if we save that it'll pass us the actual object now if we want to be more specific let's say we just wanted the name out of this we could go ahead and say name set that to user dot data name and we could create that change this to name you don't have to but it's more descriptive and save it and let's say user not defined also actually you know what this should stay user so we'll save that and now we just get the name so now let's take a quick look at pluck okay I'm just going to comment this stuff out and what I'm going to do is create a lot of our consulates call this users this is just going to be an array of users and I'm just going to paste this in okay so we have these three users with a name and age so let's go ahead and create a user stream alright so pass in users and let's do users subscribe we'll say X okay so let's save that and that's just going to give us these users as a stream as an observable now let's say that we want to pluck out just the name okay we want to return just names so what we could do is just add on to this we'll say dot pluck and then we'll just pass in name okay save that and now it's just going to give us the names okay we could get any value we want if we want the ages we can do that as well all right so that is map and pluck all right so we're going to quickly look at merging concat now merge is it allows us to merge two are more observables and can cattle aoz us to concatenate them which means one right after another all right so let's start with merge now let's do our X dot observable and we're going to just use the of operator which just takes whatever you pass it and turns that into an observable so let's say hello all right and then let's subscribe to it okay console.log X and we need to go like that all right so let's go ahead and save that and that's just going to give us hello now let's say we want to merge another observable onto it so to do that we can say dot merge and in here we'll do our X dot observable dot of and put in every one okay so now let's save that and we now get observers the two together so let's take a look at another example using interval all right so let's do rx dot observable dot interval and we'll say two seconds take 25 and subscribe okay notice I'm doing at the shorthand way now because we are running out of time alright so in here let's do console dot log what i keep doing that i keep forgetting my arrows so console dot log x so we know what that's going to do it's going to start at zero and go to 24 after every two seconds it'll emit okay so let's say that we want to merge in another interval so we'll say dot merge and our X dot observable dot interval and this time let's do it every half a second alright so now it's hard to tell which one is which but we have the one running every half a second which starts first and then it goes zero one two and then two seconds later this one starts at zero while this one's still going three four five six and then that runs again the two second one at one and it keeps going like that so we're having two of these run they're merged together they're running at the same time now there is a different and better syntax we could use with merge so let's take a look at that alright so let's say we have source will say source one and we'll set that to our X dot observable got interval every two seconds and let's do a map onto it okay so say map and we'll say V and we'll say merge one and then concatenate that V alright that way we'll be able to identify them so let's copy that and then right below it will do large - and this one will be every half a second all right we'll call this source - and then what we can do is we can say our X dot observable dot merge and we can pass in source one and source - alright and let's add dot take 25 and then we'll subscribe I keep doing that okay so let's go ahead and save that and now we'll see Marge two starts because it's every half second and then every two seconds merge once Marge one emits its value okay and this is a better way to do it we're creating the two sources then we're calling rx observable merge and passing in those sources okay so now let's take a look at concat now the difference between merge and concat is that concat will go one after another all right so what I'm going to do is just copy what we just did here I'm sorry right here all right and we're not going to do interval if we do that it's just going to go on forever so I think a better example would be to use range okay so we'll say range and let's do zero five all right and then the mapping will change that - we'll just say source 1 and source 2 okay this one will also be range but this one we want to set to 6 and we'll go to 11 all right no not to 11 we want to go up 5 all right and then down here we're going to say rx observable dot can cat source one source 2 and we're going to get rid of the take operator and let's see what that gives us all right so if we look it says source 1 it's going to go 0 and then 5 up okay and then it concatenates this one which goes from 6 up 5 to 10 all right so it runs one after another while merge will run at the same exact time all right so that's the biggest difference between the two all right so that's merge and kin cat now let's take a look at merge map can cat map and switch map all right so now we're going to take a look at merge Maps which map and can cat map and what these do is they essentially stop us from having to subscribe to nest subscribes all right now if you remember back when we worked with the github example we did a double subscribe which we shouldn't do so let's take a look at what we shouldn't do alright so say our X dot observable dot of and let's just say hello all right and then we're going to subscribe to that and in the SUBSCRIBE we'll say V and then we'll do another observable okay observable dot of and then we want to use that value that V that's returned and we're going to just concatenate onto it everyone alright and then we subscribe to that okay so when we subscribe to it let's just do X and you'll say console.log X all right so you probably know what's going to happen or we're going to get hello everyone all right so this is something you may want to do you haven't observable and then you want to use that value that you get from the observable that data in another one and this isn't the right way to do it now it works in this situation but there's others where it's not going to work okay if you want to put this in a variable and reuse it in certain places you're going to have some problems alright so what we're going to do here is use merge map so let's do the same thing using merge map will say observable dot of hello all right and then what we want to do is say dot merge map and then in here we'll have we'll save V and return ok we want to return our X dot 0 lot of and in here we'll say V whoops everyone yeah that's right and then we'll subscribe to it alright so now we'll comment this one out and save and we should get the same thing hello everyone alright so this is the correct way to do it so now let's take a look at switch map which basically transforms the items that are emitted by an observable into observables and then flattens the emissions all right into a single observable now this used to be called flat map in rxjs 4 ok which is now switch map so what I'm going to do is I'm going to use it on the github example that we did so I'm going to paste in that exact code and let me just comment this out ok I'm going to paste in that code and then we're going to basically clean it up a little all right so let's we have this get user that's going to stay the same but down here let's redo this to be a little bit more clean so let's take this right here and paste it down here and we'll work from that I'm going to make this a little wider okay so I want to add on to this now see how we're doing this get user and then a target value let's go ahead and map our value that's emitted to that so go ahead and say dot map II and then we'll set that to e dot target dot value so now we don't have to worry about the target dot value anymore it's going to be mapped to the actual emission all right so after that let's do dot switch map and in here we'll paste in our value then we're going to grab this it's from promise copy that and we have to return it so return and then we'll paste that in okay and then we can just use V right here because we already mapped it to the target value and then we can put a semicolon and then let's subscribe to it okay and I can actually copy what we have in this right here alright so let's go ahead and comment that out save it okay so now we'll go ahead and type and it works all right so this is a much better way to do it okay so this video went long as usual went longer than I had planned so sorry about that hopefully you learned at least the the gist of how reactive extensions works this was all very practical basic stuff we did I will be making a video in the future where we can actually build a working application using reactive extensions all right so thanks for hanging on this long and hopefully enjoyed it please subscribe leave a like leave a comment if you had any issues or whatever you can do is fine and I would suggest also checking out the edge wanax course alright thanks for watching I'll see you next time

Channel: Traversy Media

Views: 241,035

Rating: 4.910924 out of 5

Keywords: RxJS, reactive extensions, observables, reactive programming, observable

Id: ei7FsoXKPl0

Length: 73min 5sec (4385 seconds)

Published: Fri Sep 23 2016