React Hooks useReducer Tutorial

so we're gonna be taking a look at the users reducer hook now this hook is for storing state and is an alternative to the used state hook so we're gonna start off with a simple example and then make a more complex one to demonstrate how to use it so start off we're going to import use reducer from react and we are going to call it so use reducer and our component right here and how I use reducer works is you pass it to parameters and we can see that if we hover over we can see the signature you can pass it the reducer which is a function which is gonna be very similar if your cell are really exactly the same as what you would do in redux if you're familiar with that if you're not no worries we're gonna go over how that works and then also the initial state or you can pass in a a function that returns the initial state as well so the reducer is a function so I'm gonna say Const or we could say function reducer instead if we didn't want to use an arrow function you'll notice I am creating this function outside of the component here that's on purpose this is a function that is pure and we want to stick outside of our component we don't want to create it inside all right so I have my user reducer here I'm gonna pass and reducer and I'm going to put my initial state just start off we're gonna do something simple we're gonna do a counter so my initial state's going to be zero and again if we wanted to initialize this we could with a function so same thing and again same as you state you'd want to use a function if the initial state was took some time to compute or something like that alright so in a reducer how it works is it takes two parameters the current state and an action so the state is going to be whatever the current value is in the state and the action is basically a function that gets called and the value is going to be stored here so what it looks like is here we're gonna return a state value whatever the value is in this case it's gonna be count and then a function called dispatch so here we're going to say div counts is equal to account we can see the value of count and then I want to create a button to increment and we're also going to create a button to decrement so now what do I put here I'm gonna call dispatch and I need to call dispatch with some parameters to get this to work so I want to say decrement so basically whatever I pass to dispatch right here it's going to be this parameter and the reducer so if I were to dispatch one action would have the value of one i dispatched to here of the value of two now there is a basically best practice or general way you see people using dispatch and reducers like this and redux and so we're gonna follow that similar pattern so usually how it works is you would create an object that you pass in or you pass in a type which is usually a string so here is where I'm gonna pass a string and you can make this all caps if you want or I sometimes just do all lowercase and put it there you can also this is something where you can store in a variable so we could say increment is equal to increment it really comes down to whatever you want to do there we're gonna just keep it simple and start with here but you can follow some of the redux best practices if you like with this alright so we have this object that we're passing in we set the type increment and that's really all we need to do and then here I'm gonna say type decrement so now in my reducer basically what I do is I read what the action is and I change the state accordingly now you can do whatever syntax you want inside of this reducer but the most common one you'll see is a switch statement where you say action dot type and so here we're gonna have different cases so for example when we have an increment action passed in what should we do well we should say return state plus 1 and when we get a decrement state or action I mean we're gonna return state minus one and then here we're gonna say default return state and default is whenever the action is not an increment or decrement the default thing we should do is just return the state so let's see what happens when we do this so now we're gonna see as I increment the state in decrement the state the state changes and so we're basically are listening for these actions that are being dispatched so this is what you'd call an action and the different types we react to them in different ways all right so that is the basics of use reducer so you basically create a function that changes the state a key point with this is you do not want to mutate the state inside of this so I don't want to do state plus plus I want to create a new version of the state that is state plus one so that's very important so now that example what we're going to do is we're going to build a small little to-do list to show you some of the different ways that you would use the reducer for this so now my reducer I'm going to make it an object and it's gonna have some - dues in it it's gonna have an empty array by default and that's what we're gonna start with so now here my state is going to be an object and state dot - dues will have this value in it you can also destructor this if I want to like that so what I'm going to start with is an input field and this input field is going to be basically we're gonna wrap it in a form this is how we're gonna add - duze to our list now a good thing to know about this is we can mix hooks all we want so even though I have use reducer here if I was making this I would probably just used you state to store the state of a input field so I'm gonna say you state and I'm gonna say text set text so I'm going to pass the value of the input text there and then the on change is going to be set text a target value and now when this form is submitted on submit what I'm going to do is I'm going to add a new to-do list or new to-do item on here so I'm going to say e dot prevent default value so if you don't do this the form will refresh the page so we're going to do that and so whenever someone hits the enter key this is gonna add a to-do to this so we want to say dispatch and our action is going to be add to do and the other thing you can note about actions is you can pass an other data in there that you need so for example I want to pass in the text so here I'm going to say text and that's from the U state and so now I need to create my reducer to handle this new action that I added add to do here and I'm gonna go ahead and say pre json stringify these to do so that way we can see what this looks like we can see our array so as we add to Do's and hit enter we should see them displayed here once we add the dispatch for it I'm also going to set text and clear out the text whenever I dispatch here so here inside of this I'm going to say add to do and I'm gonna get rid of decrement so here I'm going to create a new object I'm gonna say dot dot state or in this case since we only have one item I could just say - duze and I'm gonna say dot the thoughts state dot - Deus so I'm going to keep all the existing - duze and I'm gonna add one on so I'm going to say text is equal to action dot text the other thing to note is usually the you'll usually call this payload and the payload you may put different values in so we could call the payload text or we could just call it text here just good to note that some people will name it that way but I'm just gonna call mine text there say text : action nots text one thing you'll notice if you're familiar with redux is I didn't do it this way I see I'm a little bit looser when I'm using use reducer and a single component that I am if I'm using Redux and I need to be I guess following the same convention all over my entire application so it doesn't get messy I tend to be a little bit looser when I'm just using use reducer but maybe it's better to be stricter not just one note I've noticed that I've been doing and so here I'm gonna say completed is gonna be false alright so let's see this in action now I'm gonna say 1 enter 2 and we can see our state is growing now as I add items so cool so now I want to display these items not like this but just in a list so I'm going to say to dues map and then for each T I'm going to display a div and that's going to have the value so T text and the key I'm gonna say T dot text as well so don't put duplicate text or this gonna get mechs messed up since we're using that for the key so let's see this now so I gonna say 1 2 3 and excellent those are showing up let's go ahead and now add another action so when I click on the to do I want to cross it out so on click I want to dispatch a new action that says toggle to do and I want to do that a certain index and our map function the second parameter is the index so index we can pass that right in so now am i toggle to do up here you can copy this case say a toggle to do we're gonna keep actually we're just going to get river this we're in a totally different way to get this to work so whenever I need to update the value basically we need to go through this list and we need to at a certain position at that index set completed to false or set to true basically inverse it so in situations where you need to update a certain item in a list though like to do it is say State DOT to deuce and I like to map over it so the map is going to have the to do value and then the index and then what I do is if the index is equal to action index then I do a ternary and I know this particular item when I'm mapping over is the one I need to change otherwise I just return the current to do so here I'm going to say dot about to do so I'm going to keep all those existing values in the to do in this case just the text and then I'm going to say completed is equal to t dot completed and then I'm going to inverse that value so what this chunk of code does here is it's going to iterate through the list of to dues that we have and it's going to flip completed so the value is true it's gonna go to false and we do it at a certain index all right so let's see that in action we're not making a visual difference yet so let's do that so we can actually see that change happening so here I can say text decoration and we can say strike the strike through this may not be the right this may not be right we'll double check in a second we're gonna say T dot completed sequel that other whites it's an empty string all right so let's say one click yeah it's not right so I'm gonna right click inspect here I'm gonna click on this item and I'm gonna say text decoration strike oh is it not that maybe it's a different one I thought it was me text transform nope that's one of these properties text I thought was decoration oh it's called line through all right so will it rename that so this is also by the way you get all the completion here and if you open the inspector elements and then go to styles that's what I was doing here to try to figure that out so one and I click this you can see it toggles on and off as I click it now so pretty cool and so that's the gist of use reducer you'll have an initial state of some sort you'll pass a function that's a reducer and that reducer is gonna handle different actions throughout your or different actions throughout your application and then you're gonna call dispatch to trigger those actions you're gonna pass any data you may have in you're gonna pass a type and then your deucer is going to handle updating the state so all your logic of updating the state goes in here so why do people like using this overuse state what is nice about it well our state here is relatively simple but when you get into more complex state it's nice to be able to change multiple things in the state based on actions so what is an example of that well let's say we also want to store the number of two dews we have so maybe that do count so we'll set it to zero so whenever we added to do we not only want to add something to the to do now we also want to increment add to do or sorry to do count so now I say State DOT to do count +1 so now you can see and we should also keep to do count is equal to state to do count whenever we toggle it to do here so now you can see and let's actually verify if this works and then I'll talk more about that so number of to Do's and now we can display that we can D structure it from up here to do count and let me just make sure I didn't say - duze yep good all right so I can say one two three and we can see it's now counting there so as you can see as we get more complex state a single-action might map to multiple things in the state changing and so it's very easy to put that logic in a reducer like this so for those of you that are wondering when should you use you state or use reducer because that's really the question that's gonna come up next because you can use them both for storing state I have a video that goes more in-depth over this question I'll link it below if you want to view it but the short answer is whenever your state gets more complex use use reducer if something you have is very simple you can use you state and I think that's the distinction I usually use the other thing to note is if you're familiar with Redux you'll notice is very similar so when should you be using use reducer overuse Redux again I have another video I believe going over that I'm so I'll link that below as well but the short answer for that one is if you're using the state and a single component for example in this app I have it all inside of here like using use reducer if you want to use this state in multiple components and they're spread out in that state it relies on each other that's when I like using Redux or another state management library rather than putting use reducer and maybe sticking context with it and trying to spread stuff out that way or passing down props I much prefer Redux or state management libraries in that scenario so that's that one last thing that I wanted to mention with this is you'll notice the logic with this can get quite ugly especially if this is a very nested object having to create a something immutable and that we don't want to change the value of the state it's kind of annoying sometimes so I highly recommend looking at this library called use Emmer if this is a problem you have because basically what it allows you to do is you can mutate the state and basically underneath the hood it'll handle making an immutable change for you and so this can be very helpful when dealing with large states and reducers and it works for you state as well so I highly recommend looking at this if you get some complex use reduce your logic but there you go that is an introduction to use reducer you

Channel: Ben Awad

Views: 71,585

Rating: 4.9286871 out of 5

Keywords: useReducer, Hooks useReducer, useReducer Tutorial, React Hooks useReducer, React, React Hooks, React Hooks useReducer Tutorial

Id: wcRawY6aJaw

Length: 17min 16sec (1036 seconds)

Published: Fri Jun 28 2019