How to use Typescript with Redux

hello my name is Corey McAvoy and this is the presentation and tutorial on typesafe redux typesafe Redux is basically just an approach of hooking up Redux with typescript attached it provides great type safety and it ensures a great developer experience personally I go in and I have code bases every single day and when I go into apps that are hooked up with typescript it is a great experience because there's intellisense autocomplete error detection and linting if it's if I go into code bases that are not typed safe it it's just a huge burden on the brain so I'm a big fan of tag safety and this is an example of redux with type safety so for this video the target audience for this video is someone that has a basic knowledge of react and redux I'm not going to go over these technologies individually so it's an assumption that you're kind of already familiar with with both of these it's also helpful if you have a minimum knowledge of typescript if not that's totally fine you just can't kind of pick up the concepts as we go along here for this video What's in scope is IMAP specific entities that we will hook up to typescript you know such as to-do items employees customers expenses stuff like that Redux actions rejects reducers the Redux store and we're going to use one middleware item called redux thunk and then we're also gonna hook up map state to prop sit map dispatch to props I'm to do the bolt in component hook up with redux what's out of scope is selectors such as using redux reselect and redux sagas they were just a little bit too much to add to this video I'd have to make the video much greater in length to cover these but if you want to hook these up to typescript I recommend just following the standard docs on how to do that okay so an overview of typesafe redux so from a high-level type script adds linting air detection autocomplete and intelligence to your apps so this is really really helps when you're going in and out of code bases and I'll show you a little snippet here in a second now the configuration of type C we type safe Redux is unopp in you ated there's several different approaches to making this happen I'm just showing you one approach but feel free to experiment with other approaches that are out there now these libraries are evolving so although I'm showing you a correct approach today in the future this could change and that's just because typescript and redux are just changing so rapidly that you may see different configurations in the future now with typesafe redux there is an extra set up effort so that involves us going out and defining our types so it does sound like there is more effort but this greatly improves the developer experience and you'll see just why here in a second so above is a snapshot of a typesafe redux application this may seem familiar to you if you do a lot of Redux stuff this is the map state de props object that you essentially are defining variables that you're taking from your Redux store and you're defining those two keys that you'll use throughout your app or your component in this example I'm just defining this off token variable and I'm going through the states and as you can see there's a nice autocomplete here where basically the the IDE is telling me all the different components within my store so navigating around like this sort of autocomplete really helps reduce the reduced the brain burden you have to do when you're interacting with these apps so it's a huge huge help just from this perspective okay so the workflow steps to hooking up Redux to a typesafe approach the first step is to add any app specifics types you know such to to do to do items expenses customers the next step is to create action types that go through to your reducers such as edit expense and add expense and fetch expenses etc the next step is to create app state types which is basically the architecture of your reducers your what variables does your reducer expect and stuff like that the rest of the sex steps are just hooking up the types to redux so hooking up the types to redux actions hooking up the types to redux reducers and the store and any sort of middleware which we're gonna use thunk for this tutorial in the last step is to hook up the types to your react component integration using the map state to props and map dispatched across methods naturally yet for actually hooking it up so we're gonna do a little tutorial on this it's gonna be just a basic expense app I'm not hooking up the UI in this tutorial because this is more of just a touch script Redux thing so it's all code and I'm gonna have the start and finish cut available and get home so feel free to check the comments for that information and check that out okay so now we're done with the presentation let's go ahead and move on to the coding tutorial okay so here is the app and if we kind of navigate around we should see a ton of red in the application and this is because it is not type safe yet and I have defined all of my files to be dot TS and dot tsx so just right there my code editor is just going to throw up red tags all over the place and give me tons of errors so I'm gonna have to go through and make this all type safe and once I do that all these red lines should disappear the first thing I'm going to do if you remember from our presentation is we are going to add app specific types first so for this app it's just an expense app where you can add remove edit and set expenses so that's the only app generic type that we're going to create here so let's go ahead and create a new folder called types and within here create a new file and I'm gonna create one called expense dot - yes our expense is just going to be a very basic expense and it's going to be an interface which is a typescript definition so the export interface expense and it's going to open up object and we're going to just do a few values here ID of type string description of type string a note of type string amounts of type number and it created at value which is I'm also going to make a number as well which you do see this is pretty common with a lot of like time stamps is the developers will make this a number which is like an epoch number which is like a number of milliseconds from a certain date and 70s and then you just convert that to a date in in the actual application okay so I'll go and save that and that's our app specific types so we're done with that step so if we go back to the presentation we've finished this step now the next step is to create action types such as edit expense and add expense etc so what we're going to do here is we're it another file under the types directory we're gonna call it actions TS and inactions what we're going to do is we're going to define each one of our actions it's a variable and we're going to set it equal to whatever our action type is in a string format so we'll do an export Const and we'll do add expense I'll set that equal to add expense and we're going to do the same thing for for other actions so we're going to edit expenses well remove expense and set expenses which should be equivalent like a fetch expenses okay now for that we're going to export each action and an interface format which is a type script component so we'll do exports interface set action sorry set expense action we're going to open it up and we're going to do type and then you're going to do type of and then the variable up here so sets underscore expenses and then for this I'm also going to have an expenses parameter and this is going to take our type that we had just defined earlier called expense and in this situation since it's multiple expenses it'll actually be an array and now I'll do another one I'll do edit expense so the Edit expense action and this one's going to be edit expense and this is going to be of type or I'm gonna have another primary called expense and this is going to be just the singleton expense rather than the array now do the same thing for remove so I'll make this remove expense action and this is going to be removed expense and this one's going to just take an ID rather than a whole expense type so this just going to be ID of type string and then last I'll do the add expense so export enter export interface add expense action I'm going to open that up I'm just going to take type type of add add expense and this can be type of and in this case it's going to take one parameter called expense of type of expense all right now that we've created each one of those the next thing to do is to create a aggregation of all these we're going to call that expense action types so for that I'm going to do exports type expense action types and I'm gonna sit I'm gonna set the equal to set a expense action and I'm going to use an or operator to aggregate all of these and I'm gonna do edit expense action or remove expense action or add expense action okay now that I've completed that I'm going to do another aggregation of all the different expense or all the different action types throughout the app I'm gonna call this app action export type app actions equals expense action types now app actions is supposed to represent basically all the possible Redux actions that your application in this case we're only using expense action types but in a real application you probably have more here such as like filter action types and or like customer action types and then this would further populate the of action with all the possible actions through expense and filter and customer but in this example we're just doing expense so you don't need that here so I'll go and save that and now we're done with the action part so if we go back here steps 1 and 2 have completed now we're do step 3 which is create app state types which is the data in the reducers so to do that we're actually going to go to the Redux store in our configure store file and you can get come in here and you can see that we're importing our reducer here which we have not actually set up with with type safety yet we'll do that here in a second for now what we're going to do is we're actually going to take this route reducer object and we are going to we're basically going to get the tights from it and we're going to export that as our application state type that holds all the tights throughout the state of our app so to do that we're going to do exports type app states we're going to set that equal to something called return type and it's going to take in a parameter called type of routes reducer so this return type is a typescript type thing that essentially checks whatever's in the parameter and just returns or just grabs the return type from you know whatever is in the parameter the route reducer is something that we haven't hooked up to attach script yet but we will soon and it's essentially going to grab all the tags from all our different reducers and store them into App State which is then our source of truth for all the applications state throughout our redux store so I'm going to save that and that's it for that step so the top three have been completed now we're just going to hook up everything to the types that we created so the first one we're going to do is the Redux actions so let's go back into our code editor let's navigate up to the expense action file so for each one of these we're going to do two things one we're going to type out the parameter and then we're going to specify a return type for each one of these so to do that I'll just next to the word next to the parameter you just specify a colon and then whatever the type is and then for this case it's that expense type that we did at the very beginning in the video and you're going to want to import that and then we're going to specify a return type the way you do that is after the list of parameters you do a colon right after that then I'm gonna specify app actions which again represents all the possible actions that our Redux store can take and I'm going to do that to the rest of the rest of the three here so this is ideas gonna be type string and this is going to have a return value of app actions as well same thing with edit expense this is going to be of type expense and this is going to be a return type of app actions as well and we'll do the same thing with this guy expenses is going to be an expense array and return type of app actions as well so these are now good to go I do have some more items down here but these are for the thunk part so I'm going to come back to that in a little bit so I'll save the file and now I'll consider that step done so the next thing we'll do is hook up the types and the Redux reducers so let's go back to our code editor let's go to the reducers piece so open up the expenses TS and as you can see we've got a better bunch of right under here so the first thing we'll do is on this default state we're gonna create a type for it and this should be expense and then array and make sure you import expense from our types folder now we're also going to specify types for each one of our parameters this state will infer the type from our definition up here which is great but this action one we will need to define a type here so do a colon and then we're gonna do expense action types and make sure you import that and then we're going to do a return type as well and we're going to specify expense array which is obviously the type of our reducer now I do want to do a little bit of a cleanup here I'm doing an export default here but I don't like that I usually like to actually explicitly define my reducers so I'm just going to change this to cons expense reducer you don't have to do this but I I just prefer it for syntax style and then at the very bottom I'll just export it singleton alright and now that should be all I have to do for this to make it type save so this one was relatively easy you just specify a type for the action parameter and a return type here and obviously a type for the default state which this state parameter infers from from this so I'll save that and now that step is done so step 5 looking up the Redux reducers the next step is hook up the types in redux store we kind of already did that to be honest so I'm going to skip that step and I'm gonna go to the the thunk step and it's some of this next step does actually involve the Redux tour so you'll see me actually go into that just go back to the code editor let's go back to the actions file we're going to scroll down here and on the start add expense we're going to the same thing that we did before where we're gonna give each one of these each one of the parameters to type for this object what you'll have to do is you can't actually do a colon here because that's the way you rename something so in this case we're just going to go after the curly brackets we're going to add a colon and open up another object and you actually define all your tights in here so I'll do a description : and this can be a string and then note : string amount is gonna be a number and so we'll created at it'll also be a number created at number I'll go and save this which pretty you're going to auto format just to make it a little bit easier to read and now we have to do the thunk part if you're not familiar with thunk it just allows you to return an object within your action generator and you're able to grab out the dispatch function from redux and the get state function from Redux as well what your allow allows you to access your state now to hook this up with typescript we're gonna use something called the dispatch type which comes from redux so if I type in dispatch the code editor it's gonna give me some choices really important that you import dispatch from redux rather than the react one so make sure you do that and this dispatch is going to take in a parameter and it's going to be our app actions that we had defined which again defines all the actions within our Redux store and on the skit state thing this is going to take a type of actually a function and that function is going to return app state which again is our a representation of all of our state in our Redux store okay so that looks good a little housekeeping here what I'm going to do is I'm actually going to take this object I'm going to rename it to an expense data just make a little bit cleaner down here so all I'll do expense data that should be set up appropriately and this should be all set up with type safety so I'll go and do the same thing down in these other ones on these other four so this is going to be of type string miss dispatch just going to take a type of dispatch with a parameter of actions and the skid State is going to be an object or a function that's going to return our app state a little housekeeping here remove expense should not be taking an object should just beat the ID and okay so we'll do the same thing with start edit expense it's going to be a type expense dispatch type dispatch parameter of app actions get state it's going to be a function that returns app state and another housekeeping this add expense should be taking in just an expense and we'll do the last one as well so the star set expenses this would be of type expense array and we will make the dispatch of type dispatch and this is going to be app actions as a parameter and this get state will again be a function that returns app States all right I'll save that and that should be good to go now that that part of thunk is completed we didn't have to do another piece in the store and this is very important now in the store there's a little alteration that we're going to do to the thunk piece so instead of just specifying thunk here which is imported from here we are going to do thunk we're going to specify as which basically defines a new type we're gonna specify thunk middleware which comes from the redux thunk library and this is going to take in two parameters one the first one is our application state which again we created this app state variable that specifies all the state in our Redux store and then we're going to do an app actions type as well which represents all the actions in our Redux store and that should be all set up a little bit of housekeeping here on the expenses thing if you recall correctly we redid this to not do a default export so this should actually be a named export called expense reducer and just make sure you tidy that up in the combined reducers function as well so let's save that and now thunk should be all type safe now so now we've completed steps one through seven and the last step is to actually hook this up to our react component which is actually the fun part let's come back to the code editor we're going to go to our single component here on our app called home page and this isn't anything pretty it's literally just a single component that's hooked up to our Redux store so there's a few different things we're going to do in here the first thing we're going to do is remove this expenses line it's a little bit of housekeeping there the next thing we're going to do is Wren specify types for the react component and in in this situation this isn't Redux Pacific but we need this as a prerequisite for our map safety props and map disaster props so we'll just specify two interfaces here we'll just do interphase and I'll just say home page prompts we're gonna open this up and just to give you some context I'm gonna specify two parameters but we're not actually gonna use it here so I'll specify an ID and I'm gonna make this optional by doing a question mark colon and it's gonna be a type string I'll do the same thing with another random one I'll just call it color it's also going to be optional and that's gonna be type string again we're not actually using this it's just give you context on essentially what you would normally do here we're going to specify an interface for the app for the component state so the interface home page States and this is actually gonna be blank I'm not going to specify anything here and then we will add these types to our react components so how you do that is on react component you just pass in two parameters and that's homepage props comma homepage States all right that should be good to go now we're going to scroll down to the bottom to our map state to props and map dispatched prompts we've got a lot of red here so there's a lot of things we can fix to make this type safe so the way we do that is we'll have two interfaces one interface that specifies the return values of map stage props and another one that specifies the return value of map dispatched prompts so assessed by interface and I'll need I usually name this link state prompts and I'm gonna do another one called link dispatch prompts link state to props or link state props I'm just gonna have one value here and it's going to be expenses and it's going to be a type expense which again is that action we created at the beginning of the tutorial it's going to be an array and the link dispatcher props this is going to be two different values it's going to be the start edit expense and start remove expense salsify starts edit expense and this is going to be a type function which is going to have one parameter called expense and this is going to be a type expense well and it's going to return void that's what dispatch normally returns and then we're gonna do start remove expense and this is also going to have a parameter of ID I'll type string and it's going to return void as well all right now our interfaces have been created now we're going to map state the props and we'll hook up this as well typically people instead of calling this props they actually call this own props so I'll just specify there for to avoid confusion and I'll give this a type of what we created up here this home page props if you're not familiar with redux the second parameter here on props this is essentially the props of your normal component a regardless of what you're sending in through redux so that's why we're supposed to find that type there now this state what you're going to do if you remember we created a type called app the state that basically represents the entire state of our Redux store so it makes sense to define the type AB state so I'll import that and that should be good to go now I'm going to also type out the map dispatch the props and the same thing applies to the second parameter there so let's I'll call this own props and give us the type homepage props although we aren't actually going to use it here and dispatch this type is actually gonna be a little bit different we're gonna call this thunk dispatch normally you would do just dispatch but since from redux but since we're using thunk we're actually gonna do thunk dispatch and you're going to import that from redux thunk this is going to take in three parameters the first two are just gonna be any and you'll use any for the first two parameters for most configurations only some really advanced setups that you'll actually specify something here so don't worry about that the third parameter is the one that we care about and in that one we're gonna actually pass in our app actions and obviously that that have actions represents all the possible actions in a Redux tour so we'll save that now a little needs to change down here so go ahead and remove these two and we're going to do starts edit expense and this is going to take in the value of a function called find action creators this is something that comes from Redux so make sure you import that and this is going to take in two parameters one is our Redux thunk action that we specified in our expenses actions folder here just like the start edit expense so I'll do a start edit expense and the second parameter is just our dispatch parameter that we passed in so this will be dispatch alright so that should be good to go and also do start remove expense and this will be buying action critters again and I'll do starts remove expense comment dispatch alright I'll save that so that should be good to go displaying a little bit the magic here so like if I let's say I wanted to grab some sort of item off of our store maybe like obviously like expenses here I can just do comma and maybe I'll do like auth token and I can do state dot obviously expenses are the only thing that we have right here but you can do like state state dot you know whatever store you want and you could dive down even even farther if you wanted to so I don't really need that here so I'll just erase that you can also the same thing with that homepage props so maybe I could do like ID and I could do own props dot and then you know whatever ID I specified for the component so that's really really easy and really really convenient ok so now let's come up here and just basically fix all this so our function right here it takes in a parameter of expense but it's not typed up so I'll just fix that same thing with this IG this should be a type of string all right so that should be good to go now we have a few other things that we see we need to fix obviously it says you know this start edit expense does not exist on the type the way we fix that is we specify another type that's going to be an aggregation of our homepage props and our link dispatch props and links state prop so I'll just call that type props and I'll set that equal to home page props and I'll do and link dispatch props and then and link States prop and then you just come down here change this value to props and magically all the red lines go away now the last thing we have to do is we have to make sure that we specify a return type on map this bitmap States props I mapped this - to props and the return type is just going to be these interfaces that we've created so I map state to props will do : and then link States prop and then down here on map dispatch the props I just do : map sorry link dispatch props all right and that's it and at this point our app is completely 100% type safe then includes the tutorial for type safe Redux I've hope you enjoyed this video if you like this type of content subscribe and hit the bell notification to receive new updates on new videos that's it talk to you later goodbye

Channel: Cory McAboy

Views: 39,261

Rating: 4.8769231 out of 5

Keywords: react, redux, typescript

Id: dZZxegovK9Q

Length: 36min 27sec (2187 seconds)

Published: Sun May 26 2019