React With Typescript, Redux And Thunk - React Javascript Tutorial

hey guys in today's video I want to teach you how to use typescript with the redux so this is going to be based on react so let's just get straight into it so we want to first create our react template so in your terminal and Wi-Fi D you want sleep in MPX create react app and you do need npm install to this specify the over to actor you want so i'm saying the current directory and then you want to say templates type script so this will just use the normal clear react app template which you guys probably familiar with and it actually incorporates typescript into it so it deals with the configuration and the setup so we don't have to so this will just take a moment and I'll get back to you guys when this is done okay so now that we have our template let's add in some extra dependencies so you want to type NPM I um I think the first thing we're going to want is Axios but also going to want redux with react redux as well i think we need types for react redux and types for redux so what we're going to add in redux dev tools extension and i think for now that should be it I probably forgot something but we'll come back to those later so while that's going in the background let's take a look at our folder structure so we have evolved typescript files here so these are thought CSS extensions and I do cover the basics of type Scripture another video so I'll put a link up to that so let's open up the app dot tsx and actually that's also just in a new window run npm run starts so this is just open up this will just run a local serve on localhost 3000 or you can see here so this is just the basic template so we're gonna remove all of this I'm not really interested in any of that I was going to remove the imports so this get started by creating our reducer our redox state so let me just check it's done installing but I think we can probably get started so let's create a new file and it's going to be our store so stored OTS because there can be a typescript file let's say actually have to fast and pour a couple of things I don't think my IDE you pack up on it and so it's done so I'm just gonna give this moment okay so now that we have everything installed let's create the store so input from a redox I'm going to import create store I'm going to say store is equal to create store so this accepts a reducer and some Midway I'm also gonna install a thunk so just NPM I have actually already installed it so just type in npm i redux thunk and it types for redox thunk see i've already got these two but yeah let's now create our route reducer so that's great a photo so it reduces and then a side here that creates a file called route reducer TS so now our route reducer is going to be so we're gonna have to imports combine reduces from our redox and now we're going to say route ERISA is equal to combine reduces and it's going to take some reduces so it's make sure to export this as defaults there's also create our first one so I'm actually on beating this Pokemon API which I'll show you guys the moment so I'm just gonna call this pokemon reducer dot TS so some default state I'm just going to leave this like this for now we're gonna come back to that and change it with a types but just for now we're gonna leave as empty object and as I should also create the interface for default States I for interface let's leave as empty and just give this a type of default state I and then let's say Pokemon richer sir is equal to so we're going to first get the so we first got the at the states and then we get each action and from this what we want to do so now it's actually just to return state we want to specify that this has a return type of default State then let's export this as defaults the Pokemon reducer types of the state is going to be default state I and action for now I'm just gonna say any we're gonna come back and change this but just for now leave it give us this let's also do this is equal to default state yeah so make sure the default state is on the right not the left of the type okay so let's import that so import Pokemon reducer they said Pokemon is Pokemon reducer I guess now it's imports that's so and porch producer and let's place that here so next we want to use the death toll server imports compare the dev tools we want to say compose with dev tools and then we actually need the middleware so I think that should come from redux apply middleware say we're gonna apply middleware and then here I just want an array where thunk let's also import that ok so now we're going to export default or store and now let's hook it into the react side things so if we go to our TSX and this error is just because it seems though the types aren't being installed so let me just to MPN i i've had this issue before we have some reason when i use our MPX create react up with a typescript template it doesn't install the typescript types the react types so yeah that should fix that i'm gonna remove strict mode and I'm going to instead put provider / this inside of its remedy but you come at the end and then imports provider from reactor Redux provider neither store so there's going to be store and that is going to be imported from our store that we sell value ok so now we have this act in but this is not currently working I think it's just meant to be on its own yeah so it's just one one middle Webber blanket it's now in the typescript in the app dot ESX I'm just gonna put test here just to make sure everything's working and yeah we get test ok so now let's create our first action so I'm going to create a new file called actions and I'm also gonna check has the API good music so this is the API we're gonna be using it is just the poke API thought Co so I was just looking for a funny API and this seems cool so what we want to do is be able to fetch to call out to this endpoint here and get this data we don't really care about all of the data but we just care about some of it so let's get started on that we're gonna create a new action so I'm gonna call this Pokemon actions dot yes and I'm also gonna create another file called oh c'mon action-type stop TS because we're gonna you can't put this one on one I think it's a bit much and I think you have a good naming convention then there shouldn't be a problem but yeah we're gonna pull of all types in here to not confuse it with the action so the first thing we're gonna need actually the star for the action so generally an action would look something like this so we have the action name so get pokemon and now we have dispatch and then here we actually make the request and then we would also export this as default actually I'm just explore this on its own so this is how you might normally do your typescript course you're so anyway the typescript course your redux schools and with typescript is very similar but there's some slight differences so let's import dispatch from redux and let's give this a type of dispatch let's also make this async and I think we should also install Axios access comes with pipes built-in so we don't have to install type slash access so let's create a try-catch and what we're going to do this should be a equals as you be a greater than sign and so the try we're going to say you honest well first we want to say that we're loading the data so let's say we want to do something like this batch type loading or loading Pokemon know you can do this but boy one thing you might notice is that we can just put whatever you want here and so we're not really taking advantage should type script so first let's let's decide also of dispatches we want so we want a loading we want a success and we also want something to handle the error so let's do the let's create some types of these so if I go to oh I just realized this should actually all be in the Pokemon actions not the pokémon types so let's go - Pokemon types now I'm going to export a constant oh come on loading and this is just going to be Pokemon on the school loading so you've probably done something similar to this with just normal Redux and I want three of these so this one's gonna be Pokemon failure and this one's going to be Pokemon success okay so that's all three types but then each of them are gonna have different payloads actually these two will be the same but this one will have a different payload so what we can do is say interface oh come on dispatch let's just say Pokemon loading and this going to have a type of the type of is going to be the type of this the Pokemon loading so this might seem a bit strange why we're doing type of it and it's quite simple if I remove this you will see we can error and the error is because we're this is a value so pokemon loading is the actual string value well what we want is the literal type so the so one easy way to do that is just say type of so now it will take a type of this which is this hope that make sense so this is going to be one of our dispatch types we also need to do the other two so let's do interface Pokemon fail so let's just say type it's going to be type of Pokemon fail and finally for Pokemon success it's going to have a type which is type of Berkman success but it's also going to have a payload now a payload is going to include some of this data here so if I just Allison - Jason is it's going to increase some of this data here we don't really care about all of it so I'm not going to map out all of it but we do care about the certain parts so start off with the abilities so I'm just going to close this out so this is an array let me just close everything okay so this is an array with objects inside of it and let's see this one has ability inside of the side of the abilities array the object has ability which is also an object and also has I think that's pretty much it yeah and all else has is hidden and slot so there's one two three keys that we care about and specifically I'm only gonna care about these two so let's create a type to handle this so let's say I'm just going to the top so pokemon ability it's going to be an object and it's gonna have ability which will have name as a string and URL as a string we could add in these two but then don't really care about this I'm just gonna leave them out okay so that's one of these that's another one that I wanted to do is the sprites so this price is just an object so type pokemon sprites and the only one that I read one is the front default and this is gonna be a string and the reason I want this one is because it just shows the front of the Pokemon the other one shows it back and we don't really want to see that so we have this sprites which we care about this one and now there's TV stats so stats is an array as base stats and then a star object which has the name and the URL so I'm going to take the name and the base stat so the Pokemon stats is going to be equal to see just can have based at statin name so face stats which i think is a string oh no it's actually integer number it's gonna have stat which is an object which has the name which is a string so now we have these three abilities three properties thankful now just leave it that the other stuff isn't too interesting so yeah we have Pokemon ability pokemon sprites pokemon stats and yeah so payload is going to include all of these so let's just say it's going to be an object the jason object it's going to have abilities so i Betty's which is going to be an array of Pokemon ability it's also going to have sprites so let's say sprites and this one is actually this one is an array so this one's just fine how is and it's also gonna have I think the last name is just stats yes that's which is going to be Pokemon stats and an array of that okay so we have all of the data we need so now we're going to create a type to handle all of these and that might sound bit confusing I'll show you I mean so pokemon dispatch types it's going to be equal to so it's either pokemon loading fail or success so these are the only possible ones so let's also export this and I think we should probably also explore this export this so because we're going to probably end up using them in the reducer and the or Center export is as well see it pretty much everything needs to be exploited now if we head back to the actions what we can do is this is a generic so this accepts an action so we can specify the dispatch type so this is going to be that's imports where do we call it oh c'mon dispatch types from Pokemon dispatch types now here we can say Pokemon dispatch types now this is throwing error and that is because type loading Pokemon is not assignable to you yeah so we changed the order so here it says loading Pokemon but it should be Pokemon loading so it's also imports all of our our strengths so failure or success and loading okay so now we want to make the API request so let's say con stress is equal to Waits and you have to make sure to put a thing here and this is going to be Axios let's import Axios and there should be a cat request so the URL should be this and I'm actually changes the template literals say Pokemon and then except Pokemon so this pokemon here is gonna come from the parameter which is going to be of type string and then it sound with the arrow so if this goes bad we dispatch Pokemon fail and if it goes well then we do dispatch type Pokemon Pokemon success and you can see we're actually gonna get an error and I think it's because I've got the import app yep Pokemon success yep so now we get an error that's because that Pokemon so when we have Pokemon success it's actually expecting the payload property that's missing so let's add that in and payload you can see has these fields but what we can actually do is just to respond store data now I just wanna cover something so response that data actually contains all of this but in the types I just go to them here we're not covering everything we have ability we have the front default sprite so some of the Pokemon stats but you can see something like game indices deep we don't have this in the typescript so what this means is we're still gonna have the data but we're just not going to be able to use it so you should know exactly what you want and what you're expecting in the format and the type and then you can use it in the correct way with normal type script so yeah I hope that makes it clear we're not taking out on your data but we're actually were extracting it for use but it's still there so sorry guys however when you guys think of it so coming back here we have pretty much all of this done hope I'm not forgetting anything but I think this this should be fine now let's actually look at you reducer so before we create this default state I so we can keep that but we're just going to change some stuff so we're gonna say loading it's going to be a billion we're also gonna say oh c'mon it's gonna be of type and then we actually need to have Pokemon we should probably just create a Pokemon type here and this Pokemon type is gonna be pretty much this and then instead I'm gonna replace this with Pokemon type so what we can do is say Pokemon type and just import that so and I'm just going to play a question mark it to make a an optional field then I'm gonna say loading by default is equal to false and Pokemon actually we can either out so it's undefined by default so actions actions are now going to be different so actions are going to be this pokemon dispatched types so that that's what actions are going to be so if I do action door type I should just do a let's just do a switch statement so switch action type let's say case and you can see we get also complete but I don't want to use those I actually want to import it so if I do Pokemon success Pokemon fail and Pokemon loading then I can do a Pokemon fail and here all I want to do is return this return of objects let's say loading is false so I'm not going to deal with any error handling but in in in a real case in the real world scenario you would but I'm not going to deal with it now let's do Pokemon a loading next Sofer come on loading and let's just return loading is true now finally let's the Pokemon success and for this one we just want to return loading as false and Pokemon as action dots payload and you can see it's not throwing an error because payload has type Pokemon type and this is also a Pokemon type or undefined because to put the question mark so it's that now handles are produce up so all of the dispatches here that we've typed here but being handled by a reducer now so we're storing that data okay this is there's actually one thing I forgot to do which is in our store we have to export the type of the store and might not seem clear now so I'm not going to do is show you what happens if you don't also see States what is it Pokemon states is equal to use selector to get our states or redox state I say state is equal to and let's say I want to return because we know in combined reducers we have Pokemon so state Pokemon is the thing so let's try get our state of Pokemon but we can't that's because we don't have the default route state doesn't have this so instead we have to wrap this and give this a type so it states we have to give us a type so you might want to what type do we give it what we can do is get the return type of route yourself so let's do that if I go to store we're going to export this so export type route States or that's a route store and it's going to be equal to the return type of actually I think it's return type of type of root reducer some might seem a bit strange return type is quite clear just tells you the type of where VP and his type but we can't put a value so instead we have to get the type of the value and then this tells us the type of the return of that type so it's very confusing pay we want to use this now so if I copy this and we have to import it so important aah okay we do have Pokemon here and even on Pokemon we have loading and Pokemon see that's quite nice okay now let's just do some simple stuff so let's do its create inputs with our own change let's create some states so pokemon name sets pokemon name it's gonna be equal to you states where initially it's just going to be an empty value let's just go if you do the and or change and I've got the type of this just going to copy it from here so it's event which is of type react change your van HDMI input so yeah and we're going to set we can actually do this in line so set Pokemon name to e dots events dot target those value and handle will change okay now let's put any button submits one click or let's change its search well it's going to do where you want to actually execute the action from earlier so this gets Pokemon so there's imports gets Pokemon and let's do so let's say handle submits and all this going to do is they get Pokemon actually we first need to dispatch this so say dispatch is equal to use dispatch I'm just going to dispatch gets Pokemon with Pokemon name and if your mom okay my name is the boy pass here which is how we get the results for the correct Pokemon and let's put down here so handle submits and we can actually in line this as well okay so now we want to actually get the data we do have Pokemon stay here so I'm just gonna create do and a side of this let's do this extra now I listed Pokemon States dot Pokemon I'm not gonna join yourself odors or anything fancy just on I'll show you guys the data and actually think the easiest way to do that for now might just be to also lock Pokemon States okay so we've done a lot of coding we haven't really looked at much so let's take a look at this so Pokemon return undefined your initialization oh that is because in our juicer what we've got to do is a defaults so defaults return return states see it's a non-smoking and now that's such full detail and if I open up pokemon you can see we have all of the data so that's great well there as ahead before we do have even the fields that we didn't previously account for so let's now come back here and just show the data so let's do the first to show the sprite I guess and actually before I even do that let's do a conditional so pokemon state or pokemon and and then we want to show the data so I say it's an image tag but this is going to be Pokemon state but Pokemon darts sprites default this question mark is just because I because this is possibly null I think if we remove this yes though actually works fine that's because we check here so you don't actually need that but if it's possibly not that that's the forgot what it was but it's like quite new to babble so yeah that is what that was let's also add in a and see what other data that we have the ability to loop through those so let's do pokemon stay thoughts pokemon door abilities and as J thought map I'm just gonna return a paragraph tag and say ability dots ability dot name just leave at that let's search again and now we have the image and the abilities so I'm just going to leave at that for now I hope this video is useful I'm not gonna go through and show what the data but you can see it's there and how reacts is how typescript is helping us I hope this video was useful to you guys I hope it helps you understand types and how we use that with redux and especially with video thunk so dispatch type C I think this is quite important and probably the most important part of this video is just this right here and saying of all types and also handling them you know reducer itself so he because enjoyed video thanks for watching see [Music]

Channel: LetsCode

Views: 20,560

Rating: 4.9504423 out of 5

Keywords: javascript, react, redux, react-redux, redux-thunk, think, javascript-tutorial, tutorial, beginner, react.js, typescript, react-typescript

Id: Lkng78QNWJA

Length: 31min 33sec (1893 seconds)

Published: Thu Jun 11 2020