React Redux with TypeScript Crash Course - 2021

hello everybody welcome back to the channel in this crash course we are going to cover how to use typescript with react redux now for this specific video i do expect you to know two things i do expect you to know redux and how to use it in a react application so i will expect you to know all the terminologies action creators reducers actions and everything of that nature and i also do expect you to have a decent understanding of how to use typescript with react now if you don't know any one of these two things please go to my youtube channel and watch these two videos right over here so this crash course is about react with typescript and this crash course is strictly just react redux now this is basically this video is going to be a combination of the two it's going to be working with react redux but using typescript so if you want to learn how to do that then continue watching this video however if you don't already know how to use typescript with react i suggest watching this video first or if you don't know what react redux even is then watch this video first as well but if if you fall into the category where you know redux and as well as you know how to work with typescript and react then continue watching this if you want to learn how to use typescript with redux okay so the first thing that we have to do is create a react app so that we can use it in conjunction with typescript and redux now i do expect you to know how to do this to do this all you really have to do is open up your terminal cd into whatever directory you want this react app to be created at and write the command npx create react app and then you want to give your react app a name so we can say react redux ts for typescript and then very very important you want to specify the dash template flag with typescript and essentially this is just going to create a boilerplate react application that is using typescript and so this is extremely important now i already have run this command because this command takes a long time so i did it beforehand but once you are done running it what you want to do is you want to go ahead and cd into it and then open it in whatever text editor of your choosing is i'm using visual studio code and if you open it up you should see a very boilerplate react application except it is using typescript as you can see here we have the dot tsx file extensions now that is pretty much that now the next step is to actually start creating our redux implementation and we're going to start off with our reducers and we are going to create our reducers using typescript so let's go about creating our reducers and implementing them with typescript but before we do that we need to have an understanding of the app that we are trying to build because remember our reducers are tied to the redux state so this is the app that we are building right over here so it's going to be a very very simple banking application over here we are displaying our uh state so over here we're displaying the current amount in our bank account and over here we have three different buttons if we click on the deposit button then we are going to deposit a certain amount in to our account and it's going to be reflective over here now if we click on withdraw then it is going to withdraw a certain amount and if i click on bankrupt then regardless of the number negative or positive it is always just going to go back to zero so this is a very simple application and of course we are going to be implementing it with react redux and typescript now i built a very very similar application in my react redux crash course so in this crash course i am not going to be talking about the redux implementation if you are having struggles with that please go watch this video this crash course is about how we can use redux with typescript so that is what i'm going to be focusing on mainly so if i'm going a little too fast or i'm using terminologies that you don't understand please watch my react redux crash course first okay with that being said let us go in to our vs code and let's create our first reducers now what i like to do is i like to create a state directory so you may not have created this already but i like to create a state directory and in here all the redux logic is going to consist so in here let's actually create another directory and this directory is going to be called reducers so this is going to be called reducers and over here as you can imagine we're going to have all of our reducers now for this application we're really just going to have one reducer so let's go ahead and let's create a reducer so i'm going to call this reducer bank reducer so bankreducer.ts so this is with typescript so we're going to use the ts extension so let's go ahead and let's create our reducer so i'm just going to quickly breeze through this because i'm going to expect that you do know this so over here we're going to create a reducer which is a function that is ultimately going to return a state so the first parameter is going to be the state and the second parameter is going to be an action that has a type and a payload all right so now we are going to switch on the action type so we're going to switch on this action type and don't mind the errors for now we're going to fix them these are just typescript errors and so what we're going to do is we're going to look for first for the type of deposit so let's look for the type of deposit so case type deposit in that case what we want to do is we want to return the state plus the action dot payload because we're going to provide that in our action payload all right so that's the first one let's do case with draw and then we'll do return state minus we're going to do minus oops there we go minus action dot payload and then we're gonna do a case bankrupt so this is the case where we are bankrupt and then in this case we're just going to return zero because regardless of the state we're just going to return zero now of course the last thing we need is just a default case and this is simply just going to return the state all right so that is pretty much it now you might be noticing that we are seeing some errors along the parameters and this over here now as you can see the the problem with this is just that we're not export defaulting this so we should we can just do an export default and we should be able to get rid of this error right over here this is not really a typescript error now these however are typescript errors and if i hover over them you can see here that the state has an implicit any type now our state is always going to be a number remember it's going to be whatever this number is over here so the first thing that we can basically do is we can essentially say that hey this is going to be a number and with redux we should always have an initial state so let's do const initial state and we're going to set that equal to zero and so over here we're going to say okay this is going to have an initial state of well initial state so that fixes the first error now let's go over here and well we're getting a very very similar error right over here with our actions now our actions remember are going to look something like this they're going to be an object and the object is going to contain basically the type and this is going to be a string and then the payload an optional payload value that is going to be a number so this is how our actions are always going to look so let's actually type that right now let's actually create that type right over here so let's go about doing that so we can basically say something like this we can basically say uh interface so let's do let's do type action is equal to and this is going to be a type a type of string and then we're also going to have a a payload an optional payload field so we could specify that with the uh with this question mark over here that is a number and over here we can simply say action and there we go that is pretty much all that we need to do all right so now you can see here that we're running into a little bit of issues so this isn't actually the best solution now why is that because while we're running into issues here now if i hover over this you can see here that it says hey the object is possibly undefined and over here well we're basically treating it as though it is defined because we're treating it as a number so how do we fix this right over here well we can fix this by creating a action type for every single action that we can omit so we're going to basically create an interface for every single action that we omit and we're going to specify exactly how the action is going to look like now for this for this over here for deposit and withdraw it is exactly going to look like a type of string and a payload of number however for the withdrawal well we're not going to have a payload of anything because we're always going to return zero so for sorry sorry for the bankrupt that is always going to return zero so we're not going to have a payload so we actually have to go ahead and specify these types accordingly for each action type so let's go about doing that right now okay so let's do an interface and the first interface is going to be for the deposit action and essentially what this is going to do is it's going to have a type and this type is going to be specific it's not going to be a string it's going to be exactly deposit so it has to be exactly deposit and then the payload is going to be a number all right so let's now create another interface and then we're going to call this with draw so with draw action and then what we can basically do is this is going to be exactly the string with draw so exactly the string withdraw and it's going to have a payload of number and then the absolute last thing that we're going to do is we're going to have an interface of bankrupt action and this is only going to have a type of bankrupt so it's only going to have a type of bankrupt so now what we can basically say is that the type of action is either going to be the deposit action and it's either going to be the withdrawal action or is either going to be the bankrupt action and there we go we have basically fixed everything and this is because now typescript has exactly the information that it needs to essentially infer that the action will contain a payload so essentially what's happening here is this switch statement is basically acting as a type guard and essentially when we say okay case deposit the typescript understands that okay then we are definitely using this interface right over here and we should have an action that has a type of deposit and a payload of number now when we go over here it understands that hey we have to use this interface and then when we go over to bankrupt it understands that hey we're going to have to use this interface now if in bankrupt for some reason we decided to do 0 plus the action dot payload payload it's going to give us an error because it's going to say okay well uh bankrupt only has an action that has type uh that has a type but it does not have a payload you can basically hover over that and see hey that's exactly what's happening so that is how we can essentially that's essentially how we can uh create our reducers with uh with typescript now one thing is that this thing is getting a little bit messy this file is getting a little bit messy so let's actually in the next section go through a better way of organizing our files we have successfully created our reducer but as you can see the file is kind of getting a little bit bloated and messy so i think it might be a good idea to kind of separate out our concerns because in this file i really just want to have the reducer i don't really want to have all these interfaces and these action types so what i could possibly do instead is actually go ahead and create a directory inside of this estate directory known as actions now in this actions directory i can create a index.ts file and in here i can basically have all of this action logic right over here so all of the interfaces as well as the type action i can basically cut that out and then inside of the index dot ts file i can basically just paste that in and over here i can just go ahead and export this and that way now we can basically just have all of our interfaces right here if we need it so let's go ahead and save that now as you can see we have an error over here and that's because we haven't exported or imported it so let's now go ahead and import our action so let's go over here and we're going to import our action from uh go back directory from our actions and then in the index.ts file so let us go ahead and let us save that and everything is now fine and dandy now one problem is now you can see here that we are using the action types that are consistently strings and this could be very problematic because as you can see here we're also using the strings now it is very very possible that hey i go ahead and i mistake i have a mistake and i instead of putting uh instead of spelling withdraw correctly i have a mr r now of course over here i can catch it which is great and that's the great part about typescript but i don't want to have this error looming around especially if we have multiple programmers working at the same project so a solution for this a solution for this is to create another directory so this is going to be another directory and this is going to contain all of the logic associated to the action types so in here we can have another index dot ts file and essentially here we can export an enum so we can export an enum and this is going to be an action type so an enum is basically you can think of it as it has to be one of the specified things that we put inside of this enum so let's go ahead and in here we can say that hey deposit is really deposit so deposit is equal to deposit and then we can have with a draw and that is equal to with draw and we can also have bankrupt and that is equal to bankrupt all right so now what we can do instead of hard coding the strings in here what we can basically do inside of our action is basically import that enum from move a directory our action type so we can basically get the action type and instead here now we can basically say action type dot deposit and over here we can do something very similar action type dot with draw and then over here action type dot uh bankrupt cool so now over here well we can do the exact same thing now of course if you mistaken this we do get an error but it's better to actually use the action types now instead of importing it what i also like to do sometimes is just go ahead and type action type and click on the first thing that comes up as you can see it is in the exact same directory so if you click on it you can see that it auto imports which i really like about vs code so now we can basically say that this is deposit similarly over here we can say action type dot withdraw this is withdraw and the last thing over here is hey we need an action type dot bankrupt all right so that right there is pretty much it and it really separates our concerns very very well so this is really really great uh this is really great so the next step now is to go ahead and create our action reducers now before we do this or sorry not action reducers our action creators that end up creating our actions now before we do that however we should go ahead and combine all of our reducers so in this case again we only have one reducer but we still have to do that and to do that what i like to do is create a index dot ts file so we're going to create an index.ts file and in here we're just going to import combine reducers so we're going to combine reducers and this is going to be from redux so we're going to import this from redux now okay one thing that is important and i actually completely missed this is i haven't even installed any of the redux dependencies so as you can see here we're getting an error so let's actually go ahead and let's install everything that we need when it comes to redux all right because so far we have been working with redux but we haven't really been importing any of the things that are needed for redux so essentially here what we're going to do is we're going to go ahead and we're going to do an mpm install and we're going install redux and we're also going to install react redux and then we're also going to install redux thunk now i let me double check in regards to the type definitions i don't know if redux comes with type definitions right off the bat let me just quickly double check that just so we can see if that's something that we need to install or not just bear with me for a quick second so we also do okay so we do not need to install actually we do need to install type definitions for uh react redux so we need to install those type definitions so let's go ahead and let's do at types react redux and i just noticed a typo i have react react this should be react redux so you should have these four modules installed so redux react redux redux thunk and ad types react redux so let's go ahead and let's give that a quick install and while that is installing we can basically continue on right over here with our combined reducers so let's just uh wait a little bit just ensure that this is working correctly all right and it seems like it is working actually you know what let's just continue with our reducers so now what we're going to do is we are going to go ahead and we are going to combine our reducers so we're going to do const reducers so we're going to combine our reducers using the combine reducer method over here and this is going to take in an object and we're going to say bank and then we're going to have to import our bank reducer so we can say bank reducer from our bank reducer so let us go ahead and let's do that now the absolute last thing we need to do is we need to go ahead and export default these reducers so we need to go ahead and export default these reducers so that right there is just simply the file that we need to create to actually uh um you know combine all of our reducers in this case it's just one and actually use them in our application so now that that is done let us go ahead and work on our action creators so we have created our reducers we have created our actions now we have to create our action creators so to do this let us follow the same format that we have been doing with our reducers action and action types and create a new directory a new directory that's going to be called action creators and in here we are going to have a single index dot ts file now remember our action creators are functions that dispatch actions so if that doesn't make sense to you highly encourage watch my react redux course so we are going to have three different action creators that are going to dispatch three different actions so the first action is going to be deposit and then withdraw and then bankrupt so we're going to have three different functions they're going to dispatch three different actions one that is for deposit one withdraw and then one bankrupt so let's start off with the deposit so we what we're going to do is we're going to go ahead and we're going to create a function called deposit so we're going to deposit money this is going to be our function and this is going to essentially take in an amount as the parameter and now what we're going to do is we're going to return a function that has the dispatch keyword and then this function is going to dispatch an action so this action is going to be type of and we're going to use basically that action type enum that we have specified so we can go ahead and click on that and then we can say deposit and the reason for this is because now we don't have to manually add deposit and we could possibly misspell it for instance and we wouldn't be able to catch that with typescript or or yeah with typescript at the moment so what we can do now is we can essentially say action type dot deposit to ensure that the string is exactly the same so that is pretty much all we have to do really now we can just export it but you can see here that we're getting a little bit of errors associated with um associated with a typescript over here so the first error is hey this right here it has a implicit type of any so we have to say that this is going to be a number another thing that i missed here is we're going to dispatch the type and then we're also going to dispatch the payload the payload is going to be that amount now over here we have basically a problem with dispatch because typescript has no idea what this dispatch is going to be now to fix this what we can basically do is we can import the dispatch type so the dispatch type from redux so we can go ahead and import the dispatch type from redux and we can basically say hey we want to dispatch this is of type dispatch so let's go ahead and let's just copy this and let's paste it two more times this is gonna be called with draw so we're gonna go ahead and withdraw and this is going to be dot with a draw and this is also going to be it's going to have an amount and similarly over here we're going to call this just bankrupt so we're just going to call this bankrupt and this is going to be of type bankrupt now i want you to kind of look right now so there's actually a problem with this action creator this action creator is not expecting a payload however typescript is not catching this at all a matter of fact the the we can actually pass in whatever it is that we want and typescript is not going to catch it we can pass in a boolean we can pass in a string and typescript is not going to catch it because typescript has really no idea at the moment essentially what this dispatch is going to eventually dispatch now to do that essentially we can specify that by having triangle brackets and importing that action that we have right over here inside of our actions so we can basically import this in and put it inside of this rectangle or triangle rather brackets and therefore typescript is going to have an idea of exactly what is supposed to be dispatched so let's go ahead and let's just import that in so it's going to be action from action index and now we can say here action and you can see right away it's mad at me it's saying hey this is not going to be a string so now what we can do is we can go ahead and we can change this to amount and get rid of that string and there we go now it is happy so we can do the exact same thing over here and now we can do the exact same thing over here now we can omit this over here and now we basically don't need that now if we were to change this to like true for instance it would be mad because well hey uh we have specifying our actions right over here all right so that is pretty much it for the action creators that is really all we have to do the absolute last thing that we have to do is well create our store so we have created our reducers we have created our we have created our action creators now the next step is to create our store now one thing that i like to do is i like to import everything inside of a single index.ts file so i don't have to move into each specific file to get everything that that i need so what we can do here is inside of the state directory in the state directory so not in any one of these we can create an index dot ts file and essentially from here we can basically do something relatively simple we can basically export everything from well certain directories so we can basically export star as let's say action creators from the action creator directory so we're going to go ahead and export everything as action creators from the action creator directory now one thing that we're also going to do is we're going to create a store dot ts file and in here we're going to specify our store so over here we're going to specify our store and this is again basic redux so we're going to do something like export const store here we're just going to create our store so we're going to do create store and i guess this this actually didn't pop up so what we can do is we can go ahead and just import uh create store from redux so we can import create store and we can also get apply middleware because we're going to need that and over here we can basically say that hey our store is going to be the reducers that we have passed so let's actually go ahead and import all of our reducers okay and that is going to be inside of the reducers directory and then the index directory so it's going to be all of our reducers the initial state is going to be an empty object and we're going to apply the middleware of redux thunk so let's go ahead and supply the middleware of redux thunk now we haven't imported that so let's go ahead and import that so let's go here and this is going to be thunk from redux thunk thunk seems like i haven't i haven't installed this okay so i haven't installed this or or i need type definitions for this so what i could do is then i can just say npm install redux thunk and let's also do at types redux thunk so we can go ahead and install that and that should fix that problem so there we go so once that is installed that problem should be fixed now what we can do is basically go inside of our index.ts file and we can basically export star from our store and this is basically just going to export our store so now you can see here everything is fine so that right there is the redux implementation now the next step is to actually use this redux implementation inside of our react application and so that we can essentially create all these elements over here so we can see our state and then we can go ahead and deposit withdraw and bankrupt ourselves through the use of our action creator so that is the next step so we have finally created our redux implementation with typescript but now it is time to go ahead and use it now to do this of course we need to wrap all of the elements that we want to get that redux state inside of a provider now i like to do that inside of the root index dot tsx file now if you are getting a bunch of errors in the index.tss file you're getting a bunch of squiggly lines in the index.ts index.tsx file and the app.txx file an easy fix would be to do something like npm install at types react so just go ahead and install the types for react so usually you should be able to get the types when you define the template to be a a with typescript but for some reason sometimes it doesn't happen so go ahead and just install it all right so let's go ahead and let's wrap everything inside of the provider and let's pass that store inside of the provider all right so first thing we need to do is we need to go ahead and we need to import provider from react redux we need to import provider from react redux and then what we're going to do is we're also going to import the store so we're going to import the store from our state directory so if you go to state remember this is going to be inside of the index.ts file and just to prove this to you it autofills store okay so now what we have to do is we have to wrap our app component with the provider so we have to wrap our app component with the provider and then we can basically pass in the store so to double check that everything works perfectly let's go ahead and let's just do an mpm not install an npm run start and this will just gonna double check that everything runs perfectly so let's just do localhost localhost 3000 let's just wait a little bit here and there we go it seems like everything is running perfectly fine and there we go that means there's nothing wrong with our redux implementation so now what we want to do is we want to go inside of our app.js file so let's go to our app.js file and let's just get rid of all that stuff let's get rid of all this junk and in here we're going to create a bunch of elements so the first element is going to be an h1 element that is going to have the state of our current bank account initially i'm just going to hard code it as zero so over here we should have zero i'm just going to zoom in a little bit just so everything looks good so remember our app is gonna look like this ultimately so we need a few more buttons so let's create some buttons and so the first button is going to be deposit and let's copy and paste this so over here we have a with a draw button and lastly we're gonna have a bankrupt button there we go okay so it doesn't quite look like this but you can style it to look like that so here we have our buttons so now what we want to do is when we click on a specific button we want to call the specific action creator now how do we get the action creators well we get the action creators using the use dispatch hook from react redux so from react redux we can basically use dispatch and essentially we can use this dispatch hook to get all of our action creators so let's go ahead and let's do that so over here we're just gonna do const dispatch and this is going to this batch this is going to create the dispatch we're going to go over here and we're going to call that and then over here what we're going to do is we're going to do const and over here we're going to basically get out all of our action creators but before we do that we of course have to bind all of our action creators so we get that from redux so i just auto imported it so we bind our all of our action creators now remember i uh uh i basically exported our action creators inside of this index dot ts file in the root directory so we can say action creators as well as the dispatch so there we go now over here now we have access to all of our action creators so we have access to deposit money with draw money as well as bankrupt so these are all of our action creators now one thing that we also have to do is we need to have access to our state so our current state of the application this right here is the state we don't want it hard coded so to do this we would just use the use selector hook and over here we can just simply do something like this we can just do const state is equal to we can basically is equal to use selector and over here this is going to take in a callback function and the callback function is going to have a parameter of state and it is going to return state now essentially here what we really want is state dot bank so that's what we really really want we just want state bob bank because remember how our reducers are ultimately going to look like we have basically an object and over here we have bank and then this is going to be whatever the number is however here well we're right kind of running into a little bit of a problem because if i hover over this it really has no idea what the state is going to be so how do we essentially add the type of this inside of this line right over here inside of the app.tsx well to do that we would just go to our reducers so we would just simply go to our reducers and we would essentially do something uh you know it's not going to be the prettiest thing in the world but we can basically create the type of this reducer and then import it over here and essentially define it like so so let's do that right now so let's go in over here and what we're going to do is we're going to export the type of state so we're going to call state and this is going to be equal to something known as return type and so this is actually a built in a a thing or built-in method uh or not really a method built-in type that is within typescript itself and what it's going to do is it's going to essentially interpret whatever type that we pass in these triangle brackets so over here we can basically say type of reducer all right so type of the reducers sorry so we don't want this they just auto imported that reducers so we want to basically essentially create that whatever the type of this is and we want to assign it to this state so now what we can do is simply go ahead and just import that in so we can go ahead and just import that in so we can just say well import now again what i like to personally do is instead of exporting it from here i like to go ahead inside of my index.ts file where is that so i don't just export from everywhere so i can just export star from our reducers so from our reducers slash index so we can go ahead and save that as well now in here we can just basically say that we also want we also want the state so we also want the state all right so now essentially we can basically say state right over here and you can see it's completely happy now if i change this to something like this it's mad so now what we can do is we can basically change this to maybe something like amount because that makes more sense and now we can basically have this amount over here now if we save this no error happens and nothing really changes because the initial state is zero so the last thing is we want to go ahead and call our action creators when we click on some of these buttons so let's actually go ahead and let's oops let's go ahead and let's just create an on click method right over here someone on click and over here this is going to call a function that calls well these action creators so the first one is going to call deposit money and remember for deposit money we have to pass in an amount of number we're just going to pass in a thousand you could go ahead and just create a input element and have the user input the number but for now you know that you know i don't feel like doing that really to be honest i feel like you guys get the point we can create an input element and we can pass it in there but for now we'll just we'll just hard code 1000s but you know the premise of this is that hey the user can go ahead and actually pass numbers in uh and then over here we can do with a draw money we're just going to say 500 and then over here we're going to say bankrupt we're going to call that action creator now uh for some reason this is failing which is odd i wasn't expecting that to fail so okay so the reason why this is failing is because it expects a number uh so so that is definitely not what is supposed to happen so essentially what we have to do now is we'll fix that so let's go to our action creators because the the bankrupt shouldn't be expecting any amount because it's not dispatching a action payload so let's go to our action creators and let us just get rid of this just get rid of that there we go so now if i go back such a busy file if you go back to our app.tsx that should be fine so if i go ahead and save this and now fingers crossed hopefully this works i actually did not check this beforehand no it doesn't work oh no it doesn't work okay so let's see uh why that isn't working i was i was expecting that to work but i guess it didn't so uh i'll go i guess i'll see you guys in the next video so we can kind of debug what is exactly going on here so i absolutely did nothing to the app i just forgot to refresh a few times but now you can see that the app is working perfectly so we can deposit money we can withdraw money as well as we can bankrupt ourselves and go back to zero so i hope this video was informative i hope you got a good understanding of how to use react redux and typescript in conjunction so i hope you enjoyed it and i'll see you guys in the next one

Channel: Laith Harb

Views: 20,255

Rating: 4.9513512 out of 5

Keywords:

Id: udr2rx_B99w

Length: 43min 25sec (2605 seconds)

Published: Thu Apr 29 2021