useReducer is BETTER than useState | React Hook useReducer Tutorial

can you manage state in react without the use state hook of course you can let me introduce you to the use reducer hook [Music] hello and welcome hi i'm dave today we're going to look at the react hook use reducer and why it's a better choice for managing complex state and react than the use state hook let's get started on the left i've got visual studio code and on the right i've got a react application that uses three different pieces of state we can see this here on the left in visual studio code we've got input state account state and a color state so if i type in the input it shows up here on the page if we use the increment button or the decrement button then it changes our number and we can click color to toggle the color of the text so now you can see the number and the text input that's output to the page turn to the color yellow or gold something like that or we can turn it back to white either one so that's what we've got a very simple functional component but we've got at least three pieces of state now if we wanted to pass these pieces of state down as props and we wanted to change them inside of a child component we'd actually be passing down six things already because we have each piece of state and then the setter for each one use reducer can make that much simpler although it takes just a little more to learn how to use it and of course this is a simple example overall of complex state but your app could grow or you could have a much more complex app that has many pieces of state and that's when the actual benefits of use reducer really kick in so what we're going to do is switch this over to use reducer instead of use state we'll do it one piece of state at a time though so at first we'll have both use state and use reducer i'll import use reducer here at the top okay now above our use state hooks i'll go ahead and put the reducer and here we start out with state and if we were just using one piece of state like count is the first one i'll do we could call it count if we wanted to but i'm going to go ahead and call it state because that's what we'll eventually have and of course it could be named something else but this is the standard or the traditional way of doing it the next thing we put here instead of a setter is called dispatch now this word really means send i don't use it when i'm talking to people if i say i'm going to send something instead of dispatching a message i say i'm sending a message however i like the word here because then it makes me think of this exactly this use reducer hook i'm going to dispatch an action is what we will be sending so we will be sending an action with dispatch if you want to remember it that way now i'm going to set this equal to the use reducer hook now as the name of the hook indicates it's going to use a reducer function so that is traditionally called reducer we'll pass in and we'll define that function in just a minute but we start with some initial state and again if it was just count maybe we would just have zero here but then we would just go ahead and use the u state hook right so we're going to do this with an object because this will allow us to put all of our pieces of state in the use reducer so here i'm going to put count and put the initial state value at 0 for now so we'll go ahead and remove this count and set count we'll change everything else with that but before we change anything in the jsx we need to define the reducer now this could be defined in a separate file and imported i'm just going to define it right here above so we'll start out with const reducer and then this takes in our state and then it also takes in the action that is dispatched so that's where the action will go from the dispatch and now with the reducer we use a switch statement you could use other conditional logic but this is the way you usually see it so you have a switch and we'll have the action dot type and there's a reason we put the action type well in the type property instead of just storing it in action we're going to have another property we access here in a little bit for the action as well and now for the switch statement we need to put in our cases that will impact our count state that we have right now and that is increment we'll just put the string increment and let's go ahead and return here and we need to return an object and we'll at least have the count and we're going to access the current state and then it's state dot count to get the count value and then just say plus one and then after that as you can imagine decrement is very much the same so i'm just going to highlight those two lines press shift alt and the down arrow copy down switch this string to decrement and then the count will be state.count minus one now a reducer also usually has a default as would a switch statement and here of course you want to already know all the actions coming in you shouldn't have any unexpected actions dispatched towards your reducer but this is just in case you do you're testing your application you can throw an error and then of course you'll find out if there is an action in there that you weren't expecting so there we've defined our simple reducer that will at least handle the actions for our count state now we need to go down to the jsx and change a couple of things okay scrolling down right now i think or at least i hope you can tell in my vs code that state and dispatch still don't have their full color here means they are not being used so that's what we need to do inside the jsx to of course put the value now on the page instead of just count we need to say state dot count and that will display that number for us and now we won't be using set count here instead of set count we use dispatch and then instead of the function that we were sending to the set count here we're going to set the type of action that we're taking so this is the minus button so it will get the decrement string and now i'm just going to copy this once again and then highlight the set count that we have for increment paste that in and switch the decrement action to increment you can save that now let's go ahead and pull the app back up and see if everything is like we expect and if i want to increment the number it still works decrement the number still works just fine our other use state is still working and if we type in here our state therefore the input is still working so of course you can have use state and use reducer in the same component but there's really no need so let's go ahead and now put the user input and the color states into the reducer as well let's start by setting their initial state so we'll have user input and that is starting out with an empty string and then we'll have color and that starts out with the boolean data false now that we've set our initial state we can get rid of the other instances of used state here and then at the top of course we can also get rid of the use state import now let's go ahead and set our case for that input and here let's look for new user input that will be our action and now we can return once again if you're thinking i'm making a mistake i'm doing it on purpose and then i'll talk about it but once again we need to define the value that we have and now this is where we'll look at the other property that comes with action and it is the payload so here the payload value is what we're passing in and right now we haven't switched it to dispatch yet but we're passing in the e.target.value as we get that text input typed into our input so that's what will be passed in here as the action payload it will be dispatched so that is what we have there now what i was talking about making a mistake you would think that you could just come in and for the action set the value of the action you're taking for the input or for the counter but remember this is all of our state now so when i set the count if i don't think about the user input then i'm erasing the user input likewise if i set the user input and don't think about the count i'm erasing it so now you might think this would be a pain if we have to take every piece of state say we had 20 different states if you had to type them all out you don't have to that would be bad what you can do is use the spread operator to spread the state and then you're spreading in all of the existing state and then you're writing over the one new property or the property that you're setting you're writing over with new data so that's how you want to do this you spread the state and then overwrite the one property you're setting so we can do the same thing with user input and then overwrite the user input there so while we're here let's go ahead and set the case for our toggle and here we'll just call this tg color for toggle color we're toggling that text color so we'll return once again an object where we spread in the existing state and then we'll set the color and we want to set it to the opposite of what it was and we do that with the exclamation mark to say if it was true set it to false if it was false set it to true now let's scroll down to the jsx and make those other changes so let's look for what we have if we have user input that we're displaying we need to say that is the state dot user input so that is accurate and then if we're displaying anything else well here we're setting the color up here let's look if we have a value for color here it is so here we need to evaluate state.color in this ternary statement where we're deciding which color to make the text so now let's once again change the setter here for set color to dispatch and we'll get rid of the function that we were passing into the set color function before and here we'll once again set type and this type is going to be tg color that is the action we're taking or looking for inside of our reducer so we can save that if you haven't but we still need to change the set user input over to dispatch as well so here this will be just a little bit different because we're passing in a parameter inside the dispatch we still need to set a type so that's going to be type and then we said new user input i believe and after that we need to set that payload property and the payload property is our e.target.value i believe we've made all the changes now we've got a dispatch for our text input we've got a dispatch for our color and where we're displaying everything on the page whether it is state dot count state dot user input or at least evaluating the state dot color to determine which text color we're using we have switched all of those correctly so let's save everything now and our app should still be working as we expect it to it says user input is not defined on line 36 so maybe i left one out yep i was displaying it on the page and i hadn't scrolled down state dot user input switch that on line 36 let's go back to that application and try it one more time looks like it's going to work let's try the user input hey there that's fine increment decrement can we toggle the color yes it's a white color now toggle it back to the gold or yellow and our state is still working as we expect it to so that is how to apply one use reducer instead of multiple pieces of state so the added benefit where before i said you would have to pass down each piece of state in each setter so you're already passing down six things here you're just passing down the dispatch and then of course you have to take the appropriate action as well let's look at one extra step that's not required but i have definitely seen people do this and i know why it helps it helps because you can use dot notation and not have a misspelling or something in all the different actions you may be typing for the dispatch so let's define a constant named action here in all caps like a true constant if you're familiar with other programming languages javascript of course handles constants a little differently when it comes to objects and arrays because we could still change properties here we're not going to but now let's set one called increment in all caps and that will be the increment string you just want to make sure you spell it correctly here let's do the same for decrement and then we can have another action named new underscore user underscore input and here we'll type that string we're looking for new user input and then finally we'll have tg underscore color and we'll put that to that tg color string we're looking for in the reducer as well so now we've created this action object the benefit here is you can avoid typos because if you have imported this action object and you could actually store it say in the same file as your reducer if you didn't define it just up above your functional component and then import it because now when we take an action let's come down here where we have one of our dispatches so our type here instead of just new user input we can get rid of that we could type action and then i can type dot and there there's new user input no typos now we don't have to type inc increment which is a word that i don't use that often either and worry about having a typo somewhere so that at least allows us to use dot notation and kind of standards so all we have to do is put action dot and we get the rest so here for the type let's go ahead and switch to the decrement and then here we can do increment ah there we go action dot increment and then down here we need an action dot tg color there it is in the list did we miss anything i think we've got every dispatch now so let's go ahead and save again and just make sure everything is working as we expect it to and if we type hey there or get rid of hey there all looks good type my name it's fine increment decrement toggle the color all good so that is use reducer and you can see how handy this could actually be as your state gets more complex and you don't have to micromanage each little piece of state remember to keep striving for progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 1,118

Keywords: react hook usereducer tutorial, react hook usereducer, react usereducer tutorial, react usereducer, react hooks reducer, reactjs usereducer, usereducer, usereducer hook, usereducer explained, react js usereducer, tutorial usereducer, usereducer tutorial, react tutorial, usereducer react hook, usereducer state, manage state, react state, reactjs state, use reducer, reducer, usereducer reactjs, usereducer react js, usereducer react, react, reactjs, react js, react hooks, Js

Id: 26ogBZXeBwc

Length: 15min 56sec (956 seconds)

Published: Tue Nov 30 2021