React Redux API Request With Redux and Chart.js - React Javascript Tutorial

hey guys in today's video I'll teach you guys how to deal with asynchronous actions and redux so what we're going to be doing is using this middleware called redox lank and now we're going to be creating this little project here so we're getting data about the value of Bitcoin in the past certain amount of time so here right now it's the every past minute and then we can sell it every five minutes and you can see they were using chart gesture to create this chart I just want to tell you something a little bit more interesting and just show the data as a bland table or something like that so this just makes things a little bit cooler and a little bit nicer to visually what we're going to be using is this API right here the financial modelling prep so this is a free API we're going to be using to make our requests so get what is data and we're gonna be using redux thunk along with Redux and react redux this is chart.js we're gonna be using this but specifically we're going to be using the react charge as wrapper and I think we're also going to use moment so to deal with these times here so to get started let's open up our editor and install the basic dependencies okay so now in our IDE what we wanna do is open up our terminal and I'm gonna run MPX create react app and just specify the current directory so this is just a stability basic to create react app boilerplate so this will just take a moment and I'll get back when it is done okay so now that we have the basic create reactor boilerplate we also want to add in our own dependencies so we wanna do is type in NPM I we want Redux reactor Redux moments redux dev tools extension we also want charge S and specifically we want this one here so he react charge has to and charges I think and redox thunk which i think is also just Redux thank see ya just read out think I think that should be everything if I forget something we can add that in later so this will also just take a moment or two so I'll get back on this done okay it's not that everything is installed I just want to run npm run starts so this is just create our basic localhost development server so I also opened up the chart Jazz documentation here so they were going to be using the chart j/s with react there's there's gonna be some stuff over that so the first thing just wanna show you guys that we're going to be creating a a line graph so no muchachas we'd have line I would have specified specify the type so here that you're showing the bar provoking V's in the line and I just want to show you guys the structure of the data which is quite important so labels is what we're gonna see on the x-axis so the horizontal axis and the vertical axis we're gonna see data so the labels said in our case is gonna be x and then the label here for a data set it's going to be just Bitcoin or BTC data as within data sets we can have our data so this is going to be the actual value of the Bitcoin and each one corresponds to its label so this 12 is for red 19 for blue you three for yellow and so on the colors but we're going to be looking at a couple of them but I'm just gonna copy and paste the colors I've already used so I just wanted to get that out of the way and if you guys more interested in short JSI can go over that in another video but we're just gonna be dealing with pretty much just data here so let's open up our react or a plot Jess I'm just gonna start off with this basic charge estar first then we're going to react the know go into the redux with thunk so I'm gonna make this quick because this isn't a video about charges it's a video about Redux so I wrote line here so a line so this is given of type line and then data so I just for now I'm gonna hard to cut some stuff so what we want is the labels so for now and when I say Naples is going to be 11 o'clock and say 12 o'clock then we're on our data sets so this is an array of objects the reasons are raised because you can have actually multiple lines on the same graph so that's just so you know but when you're gonna be dealing with one and so it's like data sets we're gonna have label which is gonna be a Bitcoin we're gonna have data which I'm just gonna set to you 4,000 I should say 5,000 says the value of Bitcoin and the colors I'm just gonna copy and paste over so these are just the colors so this is the color for the background it's the color for the border and this is just the points so you guys see what I mean yeah oh we have to actually put in data so now if we refresh this you can see we have a line graph so the color of the background here is actually the color the background color so that's background color this is the border color the actual line and these points that you can see here are the point water color these could also be erased so you can have different colors here and here just just so you guys know more about this in the documentation so that's just the basic data and what we're going to be doing is filling in this and this from redux so now that we have that I just want to actually throw in some buttons we're just going to finish off with the CSS the JSX and then some CSS then we'll get into the redox so there's going to be buttons wrapper and I just want three buttons so one minute five minutes and 15 minutes now we're going to create a function called fetch data and it's going to dispatch an action with it for now I'm just going to put on click on all of these which is just going to be fetch data so that function we just created and each one is going to have a specific and the specific time so it's gonna be time and then I just put in break as a comment here so just two more things I'm gonna add here first I'm going to add in the input and we actually create some state for this so we're gonna call this number and set a number gonna be react or a you stay so this is gonna be the number of data points we're just gonna be getting this should just be initially just as 15 initially and set unchanged here we don't actually need these so unchanged we're gonna set a number to event so I get lot of value and let's just give this we'd actually add anything else think that should be it so now let's just see yet we have these buttons here and we have the charts and I'm just gonna do the CSS oh and actually we are gonna have a loading yeah we're gonna have a loading and if it's the loading I just want a paragraph tag which just says a loading and he's gonna set loading it to true here this is gonna come from redux but i just want to get all the CSS and everything like that way and let's just actually wrap our line in a div just give this a class name of chart wrapper and now that i should go into the CSS so i'm just gonna open this up I've already done the CSS for this it's very basic okay yeah so everything is looking fine the CSS between the description of the video there be a link to a git repository so you can just find the CSS file there and just copy and paste it this video is specifically about redox that's why I'm just going through years part really quick okay so now let's actually get started the redox so let's create our reduces it's okay our route reducer and that's imports combined reduces from I think is from redux so let's say huge reducer is equal to combiner juices and then I'm going to create it reduce an alkaloid Bitcoin so let's create that one Bitcoin reducer so that's just set up some initial state which for not what I'm going to have is a loading and say that the force and then the Bitcoin a reducer we get the states which initially is going to be set to initial state and the action itself what I always like to do is just take out the type and payload from the action and actually for now we just retired States I'll create the switch statement later so we're gonna export defaults a Bitcoin reducer okay it's not as import that here so this is just basic redux that's why I'm going through this fast if you guys don't know it's basic redux um that this dobby link to the link to a video I did on just the basics of redux okay so now that we've got this as well let's actually create our store so a Bitcoin reducer and just export that and then I'll create our store now so we have our reduces let's create a new file storage s so store is going to be equal to we need to get create a store from redux and once again I have covered all of this in another video I've done so if this is a bit confusing to you then just watch the other video that will teach you the basics of redux and then in this video we're gonna be over react there's only one about one or two major differences with danke so let's also imports the dev tools also actually first import the reducer so that's an reduces and then reducer so now we also need to import our compares with dev tools so it's gonna be from redox dev tools compose with dev tools it's not here you guys need to pay a little bit of attention to so before this would have been fine and then we just simply exports as default or store and then we would come over to here and then we'd get our provider so imports provider from reactor redux so all of this is still the same and then we say store is equal to store right we need to import so up until now everything is working if I open up the redux here I gotta States we have Bitcoin which as as which just has is loading I mean just learning but now the only difference here is that we need to actually apply middleware or func so we need to import apply manure from redox and then just make this multi lines so apply middleware and then apply middleware is going to accept the middle web so we want thunk and then we just imports dunk from Redux thunk and we just passed that down here so now we still get no error so that's everything is working fine but we can now dispatch asynchronous actions so let's let's do that now I'm going to create a new file here good actions and this part here isn't something I went over in the last video because this part it was a bit overkill to go over it in such a video like that but here normally what you do is you'd have actions folder and these actions would be specific to certain pages for example so I'm gonna create an actions a file here called Bitcoin actions dot J's and then you would export your functions your actions here which are obviously just functions and but what you should know is that generally you would have multiple actions so what you do is each action not each action sorry each group of actions would belong to their own file so because we only have one we're burning gonna need Bitcoin actions and just one action to get the data but this is just so you know for bigger projects you actually do want multiple files so let's just create this action so let's call this get data now this is gonna take a little bit wait but what we're actually going to do is this so I know that looks a little bit strange we have to so what this is equivalent to is a normal function what we can do is we can return a function and so that's pretty much what we're doing so we're getting rid of these two here and then we're making an all in line and then we have the same thing so that that's just just what that is and then here we actually get access to dispatch so this is going us dispatcher action so just the normal dispatch where we can do type get data or something like that so that's that's what it's dispatches and here is where you would get all our ports so we are actually going to get a time prompt so you know our props our parameters we're going to get a time prop from here so if you remember here we get this time one minute 515 minutes we are going to use that here in our action so let's also remember to export this so explore the constant data do you get data I will actually just for now just console.log inside action and let's just actually get the data so I'm going to set this patch equal to use dispatch so I use this patch which is gonna be from react to redux so there's just something I always like to do just set this batch you go to use this batch and then I'm going to dispatch our actions of B dispatch II from coin actions from Bitcoin actions get data so let's import that first so imports from actions / Bitcoin actions want to import import get data then our dispatch is going to be just get data so now i justa test this out make sure everything's working I'm going to click on this we get inside action okay so now you can see it is working that's also passing the time since we're already here and I actually just realized we want to pass and one more thing which is the let's call this date account actually num phone number and I said that you know which is this right here so the number of this value get the number of inputs and this is loading we can actually remove and instead just get T I'm going to call the state so use selector I just remember to import that from reactor II ducts and from the state will I want a state Bitcoin so then now this is gonna change from loading to state stop loading that might be a bit confusing nice registering an error because this should be an object and I should set time to just time and number to none and then in our actual the Queen actions I should just the structure from the from the parameters each time and number say that was just small error but I'm moving back to the state here this might be a little bit confusing if you aren't familiar with this you selector so what we're doing is from state which is our entire redox tour we're selecting the Bitcoin reducer so here we're saying just Bitcoin and I were describing loading so that is all this is all there's some state loading and by default is false if I change that here and the Bitcoin reducer if I change that to true by default we will get that again see it's less barking okay so now let's actually get the data so in so I'm just going to close up of these so we'd no longer need to reduce it or store don't need the index and we don't need to CSS so I'm going to create a switch statement here in our Bitcoin reducer stuffy type so it's just greatly default case we're just going to return state now I want one for awaiting data are actually proven I did are waiting Bitcoin and phenomena return we can return an object where we spread in state so it's immutable and then also set loading to true so that way this is when we first make the request we're gonna dispatch a waiting bit Quinn then once we get the data then dispatch some other stuff we're talkin s up now so the set up one for rejected Bitcoin so this is a forecast fails where I just want to set state to loading false and then there's also do one for success Bitcoin and remember these should be in all capitals this is a good practice what we want to do here is return so what we were trying here is that's gonna be a little bit different so I am gonna once again spread in states but I actually want you to change the structure of this to be more like the structure of this so that's just copy and paste this data into here I'm gonna set labels to nothing datasets we can keep that as Bitcoin this data should be empty and everything else should be fine so now I'm going to just let me just fix the indentation on this okay so now what we're gonna do is get all of this data from the actual from our payload and I've actually just realized this might be a bit confusing to do in this way so instead what I'm gonna do I'm just gonna I'm gonna leave this here or whack you just comment two out for now and we should probably make the API request and then I'll show you guys how to fill this and I think that would make more sense so let's go to our Bitcoin actions and make the a pair of breasts so we're gonna create a try-catch let's import Axios that I actually remember to install Axios you know I did not so let's NPM I Axios this is just take a moment this is just what we're gonna be using to make our API requests so I'll get back to you and this is done okay so I've now installed Axios I'm just gonna run NPM run starts again we can close up our old one okay so let's first look in a dispatch we're gonna dispatch a waiting Bitcoin so tight waiting Bitcoin then what we're gonna do is actually let's take a look at the documentation for the API so the one that we want is the cryptocurrencies and the historic quote crypto quote so we have the 1 minute 55 minute and a 15 minute and the data that we get back looks like this so this is formatted because I use this JSON view Chrome extension so you guys can just install that but we get the dates open value the lower the high and the close so all we care about is the close and the dates so let's use that so let's create a say constant response it is equal to a wait and this is going to be a we're gonna be using async await so we have to put a sink here I'm gonna be awaiting Axios dot get as a get request and the URL my phinny's template letters or backticks euros I shouldn't be making just copy from here so this is our euro and let me close that and close this so in the URL you have this time part here so I'm just going to do it's just set this to time so this will get wealthy Bitcoin data for that time and for now I'm going to use console.log the response and a response dot data so just to make sure that everything is working let's just click one minute and then we get response and specifically in the network tab I just want to make sure that we're getting the right ones so here we are getting the one minute I click five minute we are getting the 5 minute and in fact like 15 y/o gave me 15 and we're getting all to hundreds and we came all the data so that's working nicely so next thing we won't do well let me just show you guys a slight issue we have right now if you look at the data the order that it's coming in is from the most from now to the past so we want to actually swap around the order because otherwise in our table we'd have for example 12 o'clock 8 and 11 here which it isn't very intuitive so we actually reverse the order of this so let's do a full loop that's I equals 0 [Music] I is less than a response dot data yeah I think that should be fine because it data the responses actually never got a link just an increment I by one so I want to create two eraser labels and just data so I'm gonna do is the labels dot push actually let's do data first date up top we're not going to do push actually we're gonna be doing on shift to reverse the order so push pushes an item to the end of an array on shift pushes at T V D start so we're going to be on shifting the response dot data for this index dots and then eclipse so I'm going to copy and paste that and say the labels the on shift response to a dated or date so is yep is date and one more thing we're gonna have to do is import moments from moment and we're gonna have to actually format this because I don't think this looks too - great so if we do moments I only pass in the time and we go formatted to I think LM is the correct one I just checked us actually L T it's now with that what we want to do is actually first let's just console.log to make sure everything's working so data it's just going to be data and labels it's just going to be labels you can remove this console look and let's just test everything now if I make this school we have all of this date work or all of the labels are currently in the AM and PM so you can see we're getting the latest one I'm sorry the earliest ones so the ones furthest in the post and then the most current ones lost okay and let's just check out data so all of this is just the clothes value so just the only thing that we actually want so this is working so one thing you might notice is that we're getting quite a lot of data so 406 values so I'm just gonna create an if statement here and it's the reason we have the this input bar so if I is equal to number so number is here the number that we passed down here which is from our input if number -1 and I'm just gonna put that in brackets just to make sure happens first so if number minus 1 if I is equal to number minus 1 that it's on a break so this will break out of this for loop and I will just continue that way we only we don't show show all 400 items on the graph because I might be overwhelming when showing certain on ok so now that we have the labels and your data what I want to do is dispatch type of Bitcoin success so of Bitcoin success and then a payload and in that payload I'm gonna save data and labels so this is just these two here so let's save that and then let's now work on this so we're copying in state I'm going to set labels to okay I'm gonna check the documentation so this is a site data labels as the x-axis yep so tables can be payload dot labels and data it is going to be and we don't you need to practice an array so data is going to be payload data so everything else should stay the same [Music] I think everything's fine actually one more change I'm going to do is just put this inside of a data object I think that should make things a little bit easier see everything inside of a data object so I'm just going to do the same thing here and just put all of this inside of this data object so ya know let's just check our state let's check our redux actually just before I do that let's just handle this just in case nothing happens I'm just gonna dispatch rejected Bitcoin so type rejected Bitcoin and we I don't know what error messages the this API throws but if you do know what error message the first thing you definitely want to put those error messages into here for example payload message you can put message here but I'm not sure exactly what ever is this API 3 so we're just going to leave it like this for now and yeah let's test that our redox state is actually updating so here we're making an asynchronous action let's just see I click this one the one minute one forget the state Bitcoin data loading is still true so we need to fix that the data we have all of our labels you can see we are only getting 15 because we said 84 to 15 and our data set as labeled Bitcoin and all of our data which is only 15 as well and all the color stuff which is the same so let's just fix that loading issue so I'm just gonna do this loading to false so I should fix that now let's actually get the data from here so we have state and so what I'm gonna do let's just say state lot of data so now when we click it you can see you're getting all the data here and you can see that it's changing and updating as we're making the changes and you can see for a moment that I'll say loading so all of that is working I just want to go through everything one more time just to make sure everything is very clear because I know I went through some of the parts quite quickly so going from the top we we set up our redox tour and and our juices and everything so just normal Redux stuff where once again if you if you if you're not too familiar three docks I do have a video on just the basics we set up our line graph and in our line graph we have our data which actually we can use this to see the structure of it so we have our x-axis so all of these times here we have our data itself so all of these ones so each point is a data point being mapped to the exact the same index label reaches up some basic colors so you guys can copy these calls if you won or usual ever colors you want and that was the basic stuff there we set up some states do you handle with just this value so now if I change to 200 you can see we can all 200 pieces of data and you can see what's nice about charge as it actually makes the labels smarter side so it's more easy to read and I think we can even do something crazy like four hundred and it might be quite a lot yeah yeah we can still see a lot of data so then we created this fetch later function where what we're doing is we're getting the time and we're dispatching using that time and the number we're dispatching an action just forgive the action but it's going to review the JSX for this so we have buttons when we click them they each have their own time we pass that time to the fetch data which then goes to the action we have the input which handles the changes of the the number of data points we want we have state to show if it's load and go note and I would even recommend adding in another one for let's say errors so error message but yeah that's just my recommendation we don't need to go over that for this video now that's going into the action so we created the one action here called get data where these values here come from come from the from right here we get data when we call it so we pass this object in I'm D structuring the object just so just getting the time and name just time any time a number and then I'm cool labeling this async I'm going to a try-catch so to catch any errors I'm going through dispatch or waiting Bitcoin so because the reducer waiting Bitcoin I wish it would that does just set loading true nothing else we're then making a request using Axios to the API we're in that API we get all of this data which looks a bit like this we're taking that data and by grabbing the date and the closed volume and he just the clothes value not the volume we're looping through this and were unshifted meaning we were pushing to the pushing to the array by pushing to the beginning of the array not at the end so normally normally when you fish to an array you do this but this would push it to the end with an on shift pressure to the spot and the reason we're doing that is because otherwise our our graph would actually look the other way around so this 2:40 p.m. would be here and that's 1:30 would be here which is very counterintuitive so then yep so we're doing that with the data source data points doing the same thing with the labels we just created this is unnecessary but I just thought would be nice this is the number of if I let's say we get to 20 and then we set the value to 20 like this then it would only show it would stop here break out of this full lips and no longer had any more labels or any more data to this and then we just carry on so it carry on to this this dispatch we're dispatching a success Bitcoin so coming here we're setting loading to false and then this data for the Chop we're saying the labels to all of these labels here here and here oh and sorry I just forgot to cover a moment what we're doing here is just setting it to just only show that our time and p.m. om see I forgot to cover that see we just were just passing in all the data and labels which are just the single-judge just a race of times and the data is just race of numbers so just these numbers all of this stuff here you can find in the charge a documentation I'm not gonna go into detail about this and then as a catch in case something goes wrong so normally here if this failed we would jump into this catch Brooke we dispatch a rejected Bitcoin where ideally you'd have some sort of message so you'd have error or just message and then you have some sort of message here which you'd then display on the react side I hope you guys enjoyed this video I tried to make this video a bit more interesting by using charge as I says it's quite a cool little library and I hope you guys get the basics of redox thunk which is that we just use dispatch shape and the way would you make asynchronous schools so I hope all of that made sense sorry if this is a bit fast I tried to make these videos not too long but they always run along if you guys enjoy the video please like comment and subscribe it really helps me out if you have any recommendations for any videos you want when suggestions even criticism then just leave that in the comments below or if you have any questions I'll make sure to respond to that as well so yeah thanks watching bye [Music]

Channel: LetsCode

Views: 4,286

Rating: 5 out of 5

Keywords: javascript, react, react-js, redux, react-redux, redux-thunk, thunk, chart.js, chartjs, react chartjs, react-chartjs, javascript tutorial, react tutorial, react js, react redux, redux tutorial

Id: UsL46JwBZwk

Length: 36min 5sec (2165 seconds)

Published: Sun Mar 15 2020