Mastering Typescript State Management using Redux

all right we've taken a look at how to do state management with typescript and off-the-shelf react tools just the ones baked into react so let's have a look at how to do it with redux and if you're like whoa redux is on the way out well yeah but i do want to present it here so that folks who are still working on redux projects have a pretty good idea about how to add typescript to their projects to make them even more maintainable all right let's just jump right into the code okay so the first thing i'm going to do is again i'm going to clone the to do base over in tmp and i'll call this one to do redux all right let's bring up vs code okay let's yarn actually before we start let's do yarn add redux and redux react redux redux is the state managing core i guess and then react redux is how it's going to connect to react using some hooks so let's add those in there all right let's start it on up okay looking pretty good we've got our top bar that we can use to toggle the dark mode we got that load button we got our to-do list it doesn't have any to-do's in it currently and then we've got the ability to add a new to-do in which we're not actually implementing yet so let's go implement that all right so over here we have a store already a stored file so i'm going to go and actually move this into a directory since there's going to be multiple files in here and i'll call that store and i'll just drop store.ts in there and the first thing i want to do is actually come up with some types well we have one already for the to do now i want to go and implement one for or at least define one for the store so i'm going to grab this out of here and we'll make a new file called types.ts and then just paste in the to do and then let's create a store so export interface for a store what are we going to have in there we're going to have our list of to-do's and also the new to do as a string easy peasy lemon squeezy so let's go import that over here because we need to pick up the to do now from there so how redux works is you have this this store over here and it's maintained by a reducer function and that reducer function takes a store and then an action and it applies the action to the store and returns a new store for example in this case an action might be to add a to-do and this reducer would go and take the current state of the store that includes the new to do and then it would take that new to do set it to an empty string so that it's cleaned but also add on to the to do's the that new to do and we have the code for that over here at least at the base level now we've got to create a reducer that can manage that for us but before we get there what we really need to do is create our list of actions and all that so we're going to create a new file called actions and start defining out what those actions are so the first thing we need to do is create a bunch of constants that have the different action types so we'll say export constant we'll say well one of them is add to do and you know by convention they're always uppercased with underscores like that and there you go so that would be an example of an action now i've actually got a lot of this implemented already and to just save us some time i'm just going to kind of copy and paste in stuff so you don't have to watch me fumble around with all the typing so let me go and bring in the rest of these so here are the different action types that we can apply to our reducer and our state we have the ability to attitude delete it to do updated to do toggle it to do set a new to do which would be to set the text of the new to do item and then also one to set all of the to do's and we'll get to that one when we end up loading from that json so now the next thing you need to do is define the contents of the action so this is nice as a constant but an action has two parts it has the type which would be like add to do in this case but it also has a payload and that payload has any extra information required to implement that particular action so let's create a new type we'll call it action type and we'll say let's just do one and we'll say it's a type or it has a field called type which is a type of and then just for example add to do like that pretty cool right and for that one that's actually fine we don't need a payload in that one but let's go take a look at one that might need a payload for example deleting a to do needs a payload because you need to identify the index the item that you actually want to delete so again i'm going to bring in a whole bunch of these off the shelf and we can just kind of walk through those we also need to bring in our implementation or our definition of to do so let's go bring that in all right cool so what are our different action types so we got set to do's which takes a payload of all the to do's replacing the ones that are currently there we have that delete to do with the index we've got a update to do that includes an id and the text we've got the toggle which again takes that number and then set new to do takes a string cool all right yes but there is still more boilerplate to go and that's kind of one of the reasons that people don't really like redux all that much so to make it easier on ourselves we also want to export a bunch of action creators so in this case for example export const we're going to create an add to do which is a function again it doesn't take any uh parameters because in the case of an add to do we don't need that so in we're just going to return then the type of add to do so you know why would you do this well it makes actually makes a bit more sense if we do if we want one like for example delete to do that's going to take an id number and then it's going to encode delete to do with a payload with that id just like that okay cool and then you get a whole bunch of these so again to keep us from watching me type i'm just gonna go grab these out pop these in there easy peasy lemon squeezy they really there's no logic in here at all this is just a question of formatting these these action objects which then gets sent to the reducer the producer then applies those to the state derives a new state and there you go so uh let's save that out and let's go implement our reducer so now we've got all that good stuff now we need to go and implement a reducer so let's call this the redux implementation because really the reducer is the heart of a redux system and again it's a function and we'll call it to do reducer it's going to take a state which is the store so let's go and bring that in from the types and then by convention you also need to go and have a default state so in this case it's going to have to do's where to do's are empty and then the new to do as a string and empty string easy peasy and then after that you need an action which is going to be action types one of one of the different actions all right so another convention in redux world is this this is implemented with a switch so we'll have a switch it's going to switch on the action type and you need to have a default action and that default action needs to return the current state of the store so just return the store or the state as well just like that okay but now we need to go and implement a bunch of those actions so let's just pick one off the shelf so set to do's is a good one and it's going to return a new state so generally speaking you just go and destructure state back into a new object and in this case all we're going to do is just take to-do's and override that with the action payload since we just want to go and replace all of the to do's with a new action payload where with with all the to do's are in the payload uh let's try another one's try for example delete to do and we can see it's going importing that up there so that's how we're getting all that and again we need to return but in this case we are going to call that delete local delete to do helper function that we have and we'll use state dot to do's as the input and then it takes an index so delete to do oops hold on brought it in from actions it's not actually doing the local delete to do which is called remove to do okay fine okay there we go remove to do and bring in the payload since remove to do takes a list of to-do's and an id and returns the list of to-do's out so this is going to delete a to-do for us but once again this is a lot of typing and a lot of all that so i just want to go and kind of bring that in and then i got to go and bring in these constants okay okay looking pretty good so let's have a quick look at all this so we got this huge switch statement that's got set to dues it's going to just replace all the to do's it's got setting a new to do which is just going to take the initial current state and update new to do it's got update to do which is going to go and call that update to do toggle to do remove to do and finally add to do is this going to set the current new to do state to an empty string and add the to do with the original new to do which had that uh original string in it so the next thing we need to do is actually go and make this into a store so finally we get to call redux so the what we're looking for is create store from redux like that and now we need to create it so i'm going to call it store and i'm going to call create store and i'm just going to give it the reducer call it to do reducer just like that export default on that store all righty cool not bad so in order to actually get this into our ui we first need to provide it so it's a provider-based mechanism seen a lot of different state managers some have providers some don't redux does so we'll do provider and we'll get that from react redux and we'll also get the store from the store and then we'll provide that down the chain so put that in the top give it the store pop it in there okay looking looking good let's see if we actually are still running all right so we need to install the types for react redux yeah fine okay cool let's go do that we'll bring in the the types in development mode okay looking pretty good not blowing up so that's a plus okay so what do we need to do well we need to go over here to well let's take it as an example to do add and we are going to go and implement this we're going to bring in a couple of different things we're going to bring in use selector and use dispatch from react redux so these are our hooks they're handy they're helpful you might see in older redux code a lot of use of connect that was kind of the old high order component way the pre-hooks way of getting data from the store into a component now the current hotness is to use a selector just like this so let's take a look i'm going to go and get out the new to do by saying use selector and i'll get the state and then i will extract from the state the new to do all right and then i need to get the actual store on that so i can get some strong typing in there so i'm going to bring in that store type and i will tell it that the state is a store and that's going to make it real happy okay cool and i also need a dispatch because i need to be able to dispatch actions to my uh store so let's bring in dispatch and then use dispatch okay so let's take new to do and set that to the value and then we do when we do an on change we're going to get an event and then we're going to dispatch a set new to do from actions right so that's our our little setter there so what does it take as input just happens to take it a string so we'll give it the event target value and that's gonna set that and then over here in button on click we're gonna go and dispatch another action to our store and that action is to add to do again over in let's see add to do from the actions just get right one in there and away you go that one doesn't take any data so okay cool and let's just try it out let's see if this is gonna work looks like it's ah okay so went off to the store but the problem is we're not actually displaying anything in our to-do list so let's go and implement that let's go over here grab a bunch of this stuff let's see uh use dispatch in the store i'm gonna need all that let's go over to do list pop it in there and go back over to do and let's take a look okay cool but in this case we want the to-do's right and we're going to use that as our array and we got our store definition that looks good and we got our dispatcher we'll use that when we start actually doing stuff with it so let's take a look so in this case check box we want to do the on click and we're going to dispatch a toggle to do out of actions with the id pretty pretty clean i would say uh all right so this got the value of the to do text that's cool so we need another on change again we'll take the event and we'll dispatch the what is it update to do cool nope i want to go get it from the actions probably shouldn't have exported from types from store so let's go and actually remove the exports on these because i don't think we need them cool okay great all right and update to do what is an update to do take well it takes a number which would be the id and takes a string so that would be the event target value cool and then finally the on click for delete which is going to be another dispatch with a delete or remove is it remove this time remove to do that's what it was wait hold on maybe it's delete to do which one is it oh there we go it's delete to do remove delete i don't know so let's see all right bringing that to do id okay that's looking pretty good let's go look it over our ui and we'll go and add oh this is looking good nice okay cool so we can delete it we can add another one add some more toggle them yeah all right looking looking pretty good okay so this is actually sending through our reducer all of that that's this actually you know it's working pretty good okay so the last thing we want to do is uh implement this load functionality over here again that goes off to this uh json payload right here it just has a nice you know bunch of to-do's get the dinner fix-ins cook dinner eat dinner all that and i want to show you how to load asynchronously and handle that in a redux store so let's go back over to our console and to get this happening i'm gonna you could use you could do all kinds of stuff with this you don't have to go this far with it but traditionally you you use a thunk for this so we're going to add a redux thunk and i'm going to add in a couple things i'm going to do this apply middleware from redux and then i'm going to bring in redux thunk and then down in here at the create store i'm gonna do this apply middleware and then give it thunk now middleware is just stuff that can alter or manage actions before or after they occur so in this case that's what's giving you that ability to optionally return a function out of a dispatched action uh that would allow you then to go and do that asynchronous behavior so that that needs to be in there as well let's go make sure that everything's still working probably need to start the server to see that happen okay seems to be happy everything's still working and that's just because regular dispatches work just fine it's this kind of special case where you are returning a a function that in turn gets you the data or whatever you got so let me just go bring in the implementation of that so i'll go over here to actions i'm going to create a new function called get to do's fun right so let me just go and fix a bunch of these things okay so get to do takes a url and it returns a thunk uh which has that string that in turn takes a dispatch this is an asynchronous function we then fetch that url we get back the response we then get the list of to do's by looking at the json response of that and then we finally dispatched that set to dues which is what we saw back up here set to dues right there and that's the synchronous version so basically the asynchronous part is right here where we go off and get the data and then finally once we're done then we synchronously dispatch the set to do's okay cool but where do we actually use this i think we have this over in top bar so let's go and import that well first we need to bring in the to do dispatcher right so let's go here and bring in a dispatcher and then bring in dispatcher from react redux easy peasy not really but you know whatever it's good to know we can do this stuff and then i need to let's see hold on i need to actually do this on the load so i'm going to go over here to on click and then i'm going to dispatch the get to do's that we just created and then give it that url copy and paste that save it so we can actually see it and looks nice yeah there we go so the click dispatches get to dues and that then goes and does the fetch gets a json response and then it dispatches again and calls set to dues with that so let's give it a try let's see if that actually works all right load hey wow work first time okay cool we're done but wow there's a lot to look at right so let's start with the types so we've got our to do that we have before no problem and we then strongly type the store which is nice so if we wanted to go and change for example to do to do list like that now we can start to see oops whoa okay so there's all these problems so we're getting our strongly type behavior out of typescript which is great which is what you want actually it's working clean right now that that's great too let's go over here to store so store is well we've got our original stuff from before so we've got our all of our helper functions and all that we're bringing in the types we're also bringing in this thunking middleware and the store creator as well as all the definitions of all the actions so again all those actions are nicely strongly typed as well so i can go and change you know if i don't change add to do to add i don't know set to do's now right we can start to see that we get type scripting issues wherever we use that so that's that's really good too okay all right and then we've got our action creators all of which are nicely strongly typed we've got our get to do's which is very strongly typed that's the thunk asynchronous action and that shows you how to do that one and then finally yeah so once we got all that done we create our reducer our reducer takes an initial state which has just an empty set of to-do's and a new to-do it takes an action defined by action types there's a big old switch statement that actually manages all that state and then finally we create the store with the reducer and apply the middleware okay now the really cool thing i would say about this is that this reducer pattern now is actually baked into react itself it's called use reducer and it takes almost this exact same api surface the only difference is that in the case of use reducer you actually don't just return the state in the case of a default you actually throw a new error not a big difference but it's kind of nice to know that you really don't actually have to use you know redux itself directly you can use use reducer and then if you want asynchronous behavior you can just accomplish that through use effects so you can use those together and perhaps create like a custom hook if you want to do that and get that all you know together and work in using user reducer use effect to do subasynchronously use callback if you want to do that so the a bunch of tools that you can use to kind of create a custom hook that gives you that state management functionality as with all of these videos all of this code is available to you on github check it out okay i hope you enjoyed learning about redux in this to do example let's talk about some pros and cons of using redux in 2021 and we'll start with the pros it's really small as you've seen it redux is about 8k so that's actually competitively small with the newer state managers it's also admittedly an industry standard i mean who hasn't heard the terms react redux and for years you've been hiring for react redux and for sure that's a thing there's a lot of folks out there that know it and that's something you should definitely consider it's also really hard to get your data into a bad state with redux it's a uni-directional data flow it's very strongly managed and typed and that makes it very difficult to get your data into a bad state there's also great developer tools and a great ecosystem around redux so those are some big pros on the side of redux now let's talk about some cons at this point it's largely redundant we have used reducer and that's baked into the ecosystem so you really actually don't need it it can also be complex in older systems using stuff like connect instead of the hooks it can be complex to reason about particularly if you've got functions returning functions needing to get called by other functions i think the signature of middleware is particularly complex and things that layer on top of redux can actually make it even more complex like redux sagas can be very difficult to reason about but if you're willing to take that on then maybe redux is the state manager for you even in 2021 but i want to hear from you get your thoughts on this and see where you're at with it so be sure to leave that down in the comment section down below or jump on the discord server and talk to us directly about it but in the meantime of course feel free to like and share this video with your friends hit that subscribe button if you haven't already and of course be happy be healthy and be safe

Channel: Jack Herrington

Views: 21,126

Keywords: jack herrington, react redux typescript, redux for typescript, redux state management, redux ts course, redux typescript, typescript for redux, typescript generics, typescript interface, typescript react, typescript react redux, typescript redux, typescript redux course, typescript redux tutorial, typescript state, typescript state redux, typescript state management with redux, redux for typescript state management

Id: emhwHjAsyss

Length: 28min 9sec (1689 seconds)

Published: Wed Feb 17 2021