React Hooks Tutorial - 19 - useReducer (simple state & action)

in the last video we had an introduction to the use reducer hook in this video let's take a look at our very first example to keep things simple we are again going to implement a counter doing so will also give you a chance to compare the code with the counter example that was implemented using the state hook earlier in the series alright let's begin we all know the basic requirements for a counter we should be able to increment the count value D chromatic ount value and reset the value back to zero I'm going to start off by creating a new file called counter one dot J s within the file I'm going to use the snippet RFC II to create a functional component for the JSX first I'm going to create three buttons want to increment want to decrement and want to reset the count value next we need a count variable that can be displayed in the JSX and this is where we need use reducer there are a couple of things to understand so let's break it down and go over each step first step we need to import use reducer from react now we can make use of it just like the other hooks user abuser is also a function we simply have to call it in our functional component now let's try to recollect the sim tags we learned that use reducer accepts two arguments the first one is a reducer function and the second one is the initial state but these are not defined yet so first step two let's define the initial state and the reducer function I'm going to define them outside the component first the initial state a counter will start off with a value of zero so the initial value which is the initial state it is also going to be zero next we define the reducer function Const reducer is equal to an arrow function again we learned in the last video a reducer function accepts two values and returns one value the two values accepted are the current state and the action these are the parameters to the reducer function now I also mentioned that the reducer function returns one value which is the new state just for the sake of understanding I'm going to add the statement returned new state so the reducer function accepts the current state and returns the new state but for this transition to happen we need something and that something is this action parameter you can think of action as an instruction to the reducer function based on what the action specifies the reducer function performs the necessary state transition for our example we can have three actions increment decrement and reset the convention to execute code B based on the action is to use switch statements so within the reducer function body we are going to add a switch statement the switch expression is the action the action itself can be increment in which case the new state will be current state plus one so return state plus one action can also be decrement in which case the new state will be current state minus one and finally the action can be reset in which case the new state will just be the initial state of zero return initial state we can also have a default case for which I will simply return the current state without any changes so this is the reducer function which is passed to the use reducer hook based on the action value the function will either increment decrement or reset the counter value so that is our step two defining the initial state and the reducer function for the third and final step we need to get hold of a value to display in the JSX and we also need a way to call the reducer function with the appropriate action now that happens to be really simple as that is exactly what use reducer returns similarly to you State user abuser also returns a pair of values which we can get hold off using the array D structuring some tags so const count c'mon dispatch is equal to use reducer so use reducer returns the current state which we have called as count paired with a dispatch method this dispatch method allows us to execute the code corresponding to a particular action in the JSX we can now add a div tag that displays the count value and to each of the buttons we can add a click handler on click is equal to an arrow function where with dispatch an action for the increment button will dispatch the increment action similarly for decrement with dispatch the decrement action and for reset with dispatch the reset action so you can clearly see that the argument to the dispatch method is the action that is specified in the reducer function when you dispatch increment it adds 1 to the current count value if you dispatch decrement it subtracts 1 from the current count value if you dispatch the reset action it returns the initial value of 0 let's save this file and include it in AB dot J's and test it out counter 1 and let's head to the browser you can see that initially we have the count value set to 0 I click on increment the value increments click on decrement and the value decrements click on reset and the value is set to 0 our counter is working as expected let me go over the code one more time and explain how it all works we start off by importing use reducer from react after that within our component we call use reducer passing in a reducer function and the initial state the initial state is a numeric value set to 0 which is the count value the reducer function accepts the current state and an action and returns the new state depending on the action if the action is increment it returns state value plus 1 if the action is decrement it returns state value minus 1 and if it is reset it returns the initial State now if at all an unknown action was fight we don't do anything to the state variable back to use reducer we can see that a call to use reducer returns a pair of values the current value of the state which is the count value in our example and a dispatch method which is capable of accepting an action to execute the code specified in the render function we use this dispatch method to dispatch the appropriate action based on what button the user clicks the actions we trigger the state transitions when the state changes the componentry renders and the collect value is displayed in the browser now if you are familiar with redux the reducer might seem a bit strange to you state is not an object but instead a numeric value action is also a straightforward string rather than an object with a type property or as the video title is going to tell you this is used reducer with simple state and simple action so you don't have to necessarily follow the Redux pattern having said that you don't have to stick to this particular way of using use reducer as well so let's take a look at another example in the next video thank you guys for watching don't forget to subscribe and I'll see you guys in the next one

Channel: Codevolution

Views: 112,844

Rating: 4.9727893 out of 5

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 (simple state & action)

Id: IHJ-TO_1nME

Length: 9min 49sec (589 seconds)

Published: Mon Jul 01 2019