React Hooks Tutorial - 20 - useReducer (complex state & action)

welcome back everyone in this video we are going to take a look at the second example related to use reducer instead of making use of a simple state and action we are going to be using a state object and an action object this is also the pattern that is going to seem familiar to all the redux users let's begin I'm going to create a new file called counter 2.2 s to save us time I will copy over the code from counter one and make the necessary changes first the component name it has to be countered to next we convert our simple numeric state into an object say Const initial state is now going to be an object and we'd have a property called first counter set to zero in the JSX we now need to render this first counter property the count is going to be count dot first counter the count itself refers to the entire state object and we only need the first counter value so count dot first counter finally we convert our simple string action into an object as well the object is going to contain a property called type which is a string so curly braces type increment type decrement and type reset and in the reducer function the switch expression is now going to be action dot type so action refers to the entire object and we access the type property finally for increment and decrement actions we now need to return the new state object so return an object where first counter is state dot first counter plus 1 and for decrement return first counter is going to be state dot first counter minus 1 and that is pretty much it the component state and action are now objects in AB Dodge's I'm going to comment out counter 1 and include counter 2 let's now test the code I click on increment the value increases click on decrement the value decreases reset and the count value is set back to 0 so use reducer with state and action as objects now the obvious question is what is the advantage of using this particular pattern well I can think of two scenarios where it could be helpful the first scenario is concerning the value by which we need to increment or decrement the counter right now you can see that the value is 1 what if we wanted to add two more buttons that could increment or decrement the value by 5 well that is easy when the action is an object right now our action object has just the one property which is action type we can add a second property called value which should be the number to increment or decrement the counter so for the existing buttons we add a value property set - one value one I'm going to quickly format this and now I will also duplicate the two buttons but this time set the value property to five the text is also going to be increment five decrement five back in the reducer function instead of the hard-coded value of one we specify action dot value let's save the file and test it out I click on increment and the counter value increases by one click on decrement the counter value decreases by one click on increment five and the counter value increases by five click on decrement five and the value decreases by five and of course reset still works as expected so by making use of action as an object we can use additional data in the reducer function that is the first scenario for the second scenario we are going to talk about state as an object suppose you wanted to maintain two different counters that turns out to be really simple if your state is an object you simply add another property to your state let's add second counter and the initial value for this counter is 10 to change the second counter value I'm going to create two more switch cases increment two and decrement two these are for the second counter now we have two properties in the state object we're changing only one at a time to get the expected output we have to modify the return statements to merge the state properties and we have already seen how to do that using the spread operator so within the object we spread the state object dot state and then overwrite the appropriate property first counter said the state dot first counter plus action dot value let's add this for the other cases as well in the render function we can now add the JSX pertaining to the second counter second counter and this is going to be first counter count dot second counter I'm also going to add two more buttons to increment this second counter to copy the first two buttons I'm going to add a div tag and paste it within the div tag this is going to be increment counter to decrement counter to dispatch is going to be increment two and the current two corresponding to these actions alright let's save the file and test this out first counter working as expected second counter also working as expected I click on reset and both of them are set to their initial value so by using state as an object we are able to keep track of two different counters so what I want you to take away from this second example is that we can maintain both the state and action as objects by using action as an object we are able to pass additional data to the reducer function by using state as an object we are able to keep track of multiple state variables we have this approach of maintaining multiple variables in a single state object is suited when dealing with global state but right now we are dealing with local state and when dealing with local state we have another way to keep track of multiple variables let's take a look at that in the next video thank you guys for watching I'll see you guys in the next one

Channel: Codevolution

Views: 128,966

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useReducer, useReducer Hook, useReducer Hook in React, useReducer (complex state & action)

Id: uX7lxFrWUbA

Length: 8min 33sec (513 seconds)

Published: Mon Jul 01 2019