Mastering Typescript State Management using just React

okay so over the past couple months i guess we've been working on typescript and i've gotten a lot of questions about a kind of a full example of using typescript with state managers as well as uh fetching stuff and i just want to go and put together a series of videos that show different state managers and then kind of compares them and gets you to where you have a fully typed state system and uh this is the first video in that series and what we're going to do in this one is we're going to use just the native off-the-shelf stuff that comes with react so we're going to start with use state and show the perils of prop drilling then we're going to update that to use use context and then finally we're going to go and create our own custom hook but it's all going to be the stuff that you get right out of the box with react so let's get right into it so i'm going to start all these with this base project this is a base project it's got some basic to do stuff already built into it and it makes it easier for me to kind of start out so let's go to tmp in this case i'm going to git clone this one and i'm going to call this one to do native react how about that bring up vs code then i'm going to yarn so this is just a off-the-shelf actually chakra template that uses typescript but it's really just create react app with some nice chakra extensions so let's down to a yarn start on that and take a look and see we've got okay so up at the top here we've got a light and dark switcher that actually came with the the template so i just kind of left it around i thought it was kind of cool there's a load button that's going to look go and get some json and bring it into our to-do list there's the to-do list which is currently empty there's a place where you can add a new to do right down the bottom it's pretty simple so let's go have a look at the code the components are the top bar which would be this part up here with the light dark switcher and the load the to do list which has the to do list in it and then the to do add which is the one at the bottom which has the text box and the add to do pretty simple and then over in the store there is a setter basically a setup for us already we've got what a to-do is going to look like and then we've got some handy helper functions and the reason that i have these baked into it is i don't want to spend a lot of time dealing with you know how to update it to do update is text it basically you give it a set of to-do's you give it an id and a piece of text and then it gives you back a to-do list that has that one updated the same thing with toggling with removing and finally adding a new to-do and i just didn't want us dealing with all that so first thing we want to do in this one is we're going to go and create some state so i'm going to go and create a new state called to do's i'll just use use state for that and i'm going to populate it with an empty array but we know we need to tell it that it is a list of to do's otherwise this will be typed as a never array so we need to give it a to-do which you're gonna import from store and it's gonna be an array of those pretty cool okay fine so far and now we've got to go get these down to top bar to-do list and to do that they all need parts and pieces of that for example at least the to-do list needs to do's so yeah add in to-do's like that but it's also going to need to do set to go and actually make anything happen so bring in that one too and some more sort of things for this and i think the only thing that to do ad would need to do would be to add to set and you know right now typescript is giving us errors because these things don't exist these properties don't exist so let's go over and look at for example top bar and see if we can get something in there so in this one well we don't need the list of to do is we just need the to-do set so i'll just pop that back but we need to somehow type that we want a to-do set and it's got to be something it's got it's going to be whatever this is right and so that's kind of an interesting part when it comes to use state right away is it's kind of hard to tell what these are this is actually a dispatch set state action and then the type so unless you want to keep typing that in all over the place i'm going to make it a little easier on ourselves we're going to go take this use state function and bring it back into the store so i'm going to go over here to store and then down here we'll call this the uh the native react implementation section so this stuff up here is going to be pretty much the same in every single example this part down here is going to be different as we go along so i'm going to create a new one called use to do's and it's just going to return it's going to take an initial state which is a list of to-do's don't really have to do that but it's nice and it's going to return the react use state and now we've got to bring in the react stuff so let's go do that go back over here all right so now we got used to do's so we want to export that for sure but we also want to go and export the different types coming out of it so that we can use those to type the properties that go into those sub components so let's go and say first we want to export the type use to do's type which is the return type of that function in this case you got to use type of and i can do command k command i and we can see that this is first the first element in this tuple coming back is a to do array and then the second is that react dispatch blah blah blah right so okay so we're going to export another type called to do's type and we're just going to say that that is the zeroth item off of use to do's type in fact we'll just make that uppercase just just for heck of it okay drop that in there and then we're also going to say that the set to do's type comes from the second one there you go cool so now i've got a bunch of new types and i've got this help this helper little used to do things so i'm going to go over here to app and first i'm going to bring in use to do's just like that and then i would no longer need to do no problem but now i can start actually going and setting like top bar for example so i can go back over to top bar and i can bring in set to do's type from the store and now i can set it so that is the correct typing and the great thing about this is whenever these types change these types will also change because they're relative to that type right i don't have to go and type in if i change the you know name of to do or whatever the topology of to do it's not going to change so it's just a very nice way to be able to do that okay so let's go and type in the other stuff as well so i'll go into here to do list bring in that one call this again to do's type and so here we're going to have to do's and we're going to have set to do to do set is that what i call it or did i call it set to do's probably call it set to do's nope to do set okay and then we'll go and type those okay so that's fine but now it's actually got to pass that on it's got to drill that to the next level down so i got this to do's list and a to-do list includes the heading and then the to-do list items so now we got to drill that so we've got to say to do equals to do's to do set equals to do's set and then we've got to go and take these props and propagate those up into the to-do list items so this is the hazard of prop drilling right so this class which is really just a visual container is having to drill down into the classes that actually need them the what you know those properties actually are so that's that's not great if you've got a prop drill particularly multiple levels that's a real code smell when it comes to react don't don't do that but we'll get there we'll fix that with context so let's keep on going let's actually get this implementation going so i'm going to go over here and i'm going to say we want that to be our to-do's like that and so now i'm going to start actually well let's let's do to do add over here let's just add one more thing in and get get our properties going so to do set like that so again i bring in to do set to do's type and we'll call this to do set again okay cool so now we need to actually start implementing on this stuff and the way that we do that is we use to do set for example uh in this one we're gonna hold some state locally for that new to do so let's go create that so we'll start off with an empty string we'll go and make that the value of that input and then do the on change for it there we go that's track now and now in the on click of this we then then need to go and let's see we need to to do set and then we need to give it the add to do from store and we give it the original list of to-do's i could i guess i need them okay fine so we'll bring those in to do's and then the new to do as a string but we don't have to do's so let's go and put that in there to do's and now we're gonna say that's the do's type which we also need to bring in okay looking looking good so i think that should actually work let's make sure that everything's saved oh we're missing to-do's so let's go back over here to our app make sure you send those in as well and now i can yeah looks like it's actually working the only thing so far the only couple more things that need to work are this done button over here the deletes and the load so let's just go on to our to-do list and actually have some fun with that so in the check box we're going to need an on-click handler for that and that's going to again do to-do's set with the toggle to do of the to do's and given the current to do dot id then in the input the value is going to be the current text that's right and then we need to update that text so let's add an on change again we'll take the event and we'll do the to do set with the update again the list of to-do's and the new text oh we also need the to-do id i'm guessing yep yeah okay i think it worked yeah to do id and then text that makes sense and then finally the delete button which will say again we don't take any parameters and we'll go and set the to do's again this case with the remove to do given the list of to do's and the current to do dot id okay yeah pretty good so let's go take a look at this and can we delete yeah we can delete we can change you can set the value pretty nice okay cool now the last thing to do is implement the so i'm going to go over here to add or top bar and then go grab this this is basically just a very small json file that has some example things get dinner fixings cooked in or eat dinner pretty simple stuff so in this case we're going to want to do an on click here to do for example onload and that onload function is just going to do a fetch with that url and get the response back that's going to be json's or json encoded so we gotta convert that and then finally we get the data which we then do set to do or to do set on that data all right let's take a look and i should be able to hit load button there let me refresh hit the load button nothing works that's great okay on click on oh haha there we go there we go get dinner fix in this cooked entry dinner excellent cool so that's it for use state if you just want to use use state and do the prop drilling but i actually don't think that that's a very good stopping point at all i think prop drilling is bad and i think the right thing to do at this point would be to build and use context context allows you to share the to do stuff still at the top level directory at the top level of the react stack using a provider but then you don't actually have to have any of this stuff sent down by a props you can do use context and go get that context wherever you need it so for example this component over here in to do's list the to-do list will not have to take these props and will not have to do the work of passing them on to the child component which is really what we want to avoid so how are we going to do this well so the first thing we need to do is create some context so i'm going to do to do context and then we use react.createcontext and what's going to be in there well what's going to be in the context is going to be either the use to do's type or null and we'll start off with no all right and then we're gonna actually do something nice we're to create another react custom react hook we'll call it used to do context and that's going to return react.use context with the to-do context that we just created but now i know at runtime we are always going to have something right so i'm going to use exclamation point at the end and that's going to coerce the to-do context in this case so that we don't always have to go checking for null and then the last thing i'm going to do is create a nice provider so i'm going to say export const to do's provider and that's going to take children and those children will be of type react node which i then need to bring in and i also need to upgrade this file to a tsx file so store.tsx that's probably going to break the build so let me go and restart that in a second but down in here i want to do to do's context.provider and then i want to give it a value and the value of that is going to be used to do's or the result of use to do's and that's fine that is just like calling a use state at the top of your function doing it right here is not going to mean that it gets re-invoked with every single re-render it's totally totally totally fine and then within that i'm going to have my children just like that all right so what's it complaining about all right it's telling me that i need to have an initial value in there not a problem okay so now i've got some really cool stuff i've got use context and to-do's provider so first let's go and use to-do's provider out of here and we'll just put that at the top or within chakra it really doesn't matter we're not going to use it in here and then i'm going to get rid of this and i can start getting rid of all of these props yay [Applause] just like that bye bye props don't need you anymore okay so let's go over here to to do add we get rid of that and how are we going to then get to do set well cool let's go over here to use to use context and this is how we're going to go get the context and from here we can say that we want to do's set from the to-do's context and there you go we can even get the list of to-do's which we need as well so there we go cool all right so it looks like this one is ready to go so let me go and go down to do's list and we can start removing props again nice and we can just use to do's context to go get that get rid of these two i think is that and then we'll go down here and remove these as well as these okay so that's looking pretty good so we're just starting to basically take these props out and replace them with the context okay so last one then would be our top bar so again we'll get rid of that we'll get rid of our props and we don't need the to do's we just need to do set all right let's uh looks like we were reporting no problems no problem so let's do yarn start all right looking pretty good let's try load hey wow that's cool add a new one looks good i should make it so that it sets that to a blank piece of text that would be good so where was that that was uh to do add so that's something we should do in addition to clicking is to also set that value to null or to empty string just like that all right this time when i add yeah okay that's better and let's see can i delete yeah looking good okay so let's go back and summarize what's happened here so let me go back to our store for a second and we basically kept around all this stuff although we can probably get rid of all of that if we want so now we've got the used to do's which we're not actually going to expose we don't need to use to do's type either exposed that's fine we've got our to-do context that we create but then don't need to expose because the things that we want to expose out of here are let's get rid of these these two you don't need those nice you really want to make sure whoop you actually do need those uh you really want to make sure the x you expose out of modules the very smallest piece of interface that you need so in this case the only thing we need are these helper functions and this to do interface the update toggle and all that sort of stuff because we're going to end up using that in the components and then you need the use to do's context which is a helper custom hook to go get us the context and then that provider which then goes and provides the context that starts off as empty down to all the children cool okay great but i think we can still do one better and that's actually to create a nicer interface that from a custom hook so i'm going to create a a new custom hook here and we will call it use to do's and it will take a an array of to-do's we'll call that to-do's internally and to do set just like that and then we're going to return out of that custom hook to do's as well as we're going to go and also maintain the new to do that string so let me go and just copy that out of uh to do add just go grab that all right so we'll have our new to do's and new to do set we'll just pass that one along as well but now i'm actually going to go and make a lot of helper functions in here so i'm going to say add to do and that is going to do add to it's going to set the to do's with with the add to do and then we'll give it the current list of to-do's along with the new string so new to do all right cool and this would be nice i'm going to call and say that every time we do this we're going to use the callback function on this so we make sure we never have a stale value and so that's going to add a new to-do and then let's see what else do we have to do we have to update toggle and remove to-do's as well so let's do that update and that'll take an id and piece of text and that's basically going to do exactly the same thing so it's going to call update to do with the id and the text and two more to go toggle to do which doesn't require any text so let's get that out of there and then remove to do piece of text in there there you go and so now this is a really nice hook it gives us everything that we need the entire state of the system plus all of the accessories to be able to go and modify that add to update all that sort of stuff so let's go and see how much easier this will be to uh to work with so actually one more before i leave so let's do load and that's going to give a list of to-do's and it's just going to set the to-do's to what that's whatever that's coming in as let's call it uh in to-do's just you know make sure that we know exactly what we're dealing with all right so that well the first one will use that so instead of use context this way we're going to use use context with destructuring and we'll say that that's i'm going to get out load out of there and we'll just call load with the data very cool and then let's go over to to-do list and i've got to do's but i don't have to do set anymore that's that's hidden from me now so that's actually good so what do i have i've got add i know i have update to do i've got uh what else do i have i've got toggle to do and i've got remove to do and those are all coming out of used to do context all right so to do's works let's see update to do let's drop that in there i'm just going to go and remove to do set because it's going to handle that for us pretty cool and i can get rid of that that looks like the right signature and i'll go down here to remove to do and see that i don't have to give it the list of to do's anymore oh this is looking really nice toggle to do oh yeah this is looking like a real estate manager okay beautiful wow okay that's looking really really clean all right let's go over here to to do add and then we are no longer dealing with this yay okay well actually hold on let me go and just grab that because we're gonna get get that out of the context there we go new to do set that's cool and what remains to be done added to do cool let's go and grab that as well add to do and in this case we're just going to call add to do cool oh and actually let's do it let's move that back into the store so that it's all handled for us so let's see add to do and then we're also going to do new to do set right there in that nice that is just beautiful okay so let's take a look refresh the page dark mode still works that's absolutely critical load that works that's great let's finish this up oh this is looking good okay can we delete yes we can can we add it to do yes we can and it's setting it to empty strings looking great okay cool so we have gone through use state with prop drawing then we converted that to context which is pretty good although the context contained an array which seemed kind of weird right as an interface an array of the to do's and the set to do's it's not very extensible long term i mean what we really want is we want an api and so what we did was we created this this custom used to do's hook which automatically maintains the state of all the to do's as well as the state of the new to do that we're going to add and then it exposes that in a surface that has a really nice api signature to it it's got the list of to do's it's got the new to do ready to go that string and it's got these helper functions that don't require us to pass them to dues anymore they know all of that stuff inherently all they have to do is is send in the data that is actually germaine to the mechanism of the method in this case for example update to do takes the id of the to do and what you want the new text to be so very nice and then in terms of all of this code notice we didn't have to change that at all because we were using these relative types we're using things like return type type of use to do's we didn't have to change any of this code because when the api surface of this changed an array into an object how cool is that that is just great and then down here we have created our context which was starting off as null we have a context custom hook that gives us back that context we can actually see what that looks like command k command i we can actually see our return type right in there all hinted for us ready to go and that's going to be what comes back from the result of use to do's contacts is going to be all that stuff that's just fantastic and then the to-do's provider which you put at the the top of the app over here to provide that context all the way down the top bar then you know it handles this you could actually probably move this load function back into the store if you wanted to that's fine too the to-do list becomes much cleaner we don't have any prop drilling at all just a really really nice and clean surface area for sharing context and state between components okay i hope you enjoyed that walkthrough of using the context and state tools that are built into react to make effectively your own state management system and i think this provides a nice grounding as we go into the videos that follow looking at things like redux and mobx and valshio zushdan jotai the list goes on and on what's even cooler is i actually have all that code written already and there's a link to that in the description so you can go and jump ahead yourself if you want to or you can wait for the videos to come out and watch and follow along and then check out the code for yourself in the meantime of course i really want to hear your feedback and if this content is working for you the reason i'm creating this content is because you asked for it so let me know if you like it in the description down below or jump on the discord server and have a chat with us directly there's a link to the discord server also in the description feel free to like and share this video with your friends but of course in the meantime be happy be healthy and be safe

Channel: Jack Herrington

Views: 6,765

Keywords: react js, react js tutorial, learn react js, reactjs, typescript, typescript react, typescript state, typescript react state, react typescript state, react state management, typescript state management, typescript custom types, typescript state management with react, typescript state with react, typescript state managment with only react, typescript state with only react, typescript state using react, state management in react typescript, typescript react state management

Id: 8QtiqXew2QQ

Length: 31min 56sec (1916 seconds)

Published: Wed Feb 10 2021