‫Let's start this section by getting
‫a first high level overview of
‫how to use the usereducer hook in practice
‫over this lecture and the next one.
‫And as always, it is time to create yet another project.
‫So let's move to our folder
‫and then let's run NPX Create-React-App at version five.
‫And then the app that we're going to build in this section
‫is gonna be called React Quiz.
‫Now, right?
‫And now let's wait until Create-React-App
‫finishes installing all the packages that we need.
‫Okay, and now it's time for our usual cleanup.
‫So first I'm gonna rename this here.
‫So we're already in our 10th project.
‫And now let's get rid of all this stuff here as always.
‫Okay, then getting our starters from here.
‫And this time we have five starter files
‫so I think that might be a record.
‫Then yes, replace the CSS file
‫and then let's just drag and drop our folder onto VS code.
‫And then as always,
‫let's also delete all the stuff we don't need from here
‫and the rest is okay.
‫So we need the Up component
‫and we need to include the CSS file
‫which as always, is part of the starter files right here.
‫So let's start by opening up the app file
‫and the date count file,
‫which we will need soon.
‫And then here, let's delete everything
‫and start the app component from scratch.
‫So export default function app.
‫And then here let's just create a div.
‫And in this div I will immediately call the
‫DateCounter component.
‫So DateCounter
‫and then I need to import that
‫from DateCounter.
‫So let's take a look.
‫So opening up our integrated terminal
‫and then NPM start.
‫And so this is what you should see
‫if you successfully started your application.
‫So let's also close the app
‫because in these first two lectures,
‫we will only be working with a DateCounter.
‫So this DateCounter is identical to what we implemented
‫in one of the previous challenges.
‫So basically here as we click on one of these values,
‫it will then increase the date.
‫We can also update that number here
‫and you see that then it also increases the date
‫and we can change the value on this slider,
‫which is basically the step.
‫So if we then click here,
‫it increments by whatever the step value is here.
‫Now, okay.
‫And so what we're going to do now
‫is to basically replace these two usestate hooks
‫with Usereducer hooks.
‫So it's very important that you understand
‫exactly what this code here does and how it works.
‫And so in case you didn't do the challenge
‫or don't really remember,
‫then please take a few minutes now
‫to really check out this code.
‫So all the event handlers that we have here
‫and how they update these two states
‫and how the states interact with one another.
‫So only proceed in this lecture
‫once you are really sure how everything works here.
‫Now, okay, but anyway,
‫let's now finally talk about the usereducer hook.
‫So the usereducer hook is basically
‫a more advanced and more complex way of managing state
‫instead of the usestate hook.
‫Now the usereducer hook works with
‫a so-called reducer function,
‫which is a pure function
‫that will always take in the previous state
‫and the so-called action as an argument
‫and will then return the next state.
‫But instead of talking about it, let's actually use it.
‫And I will start by replacing
‫this first count state right here.
‫So let's write again, count,
‫and then dispatch
‫and I will explain what these mean here in a minute.
‫And so then usereducer.
‫And so this hook takes in not only the initial state,
‫but also the reducer function that I was just talking about.
‫So let's already write that here
‫and I will then create dysfunction in a minute.
‫So that's the first argument.
‫And the second argument is again the initial state.
‫And so that's again zero.
‫So let's then comment out this state
‫and then let's create outside of the component,
‫that reducer function.
‫So that's just function reducer.
‫And so as I was saying, this reducer function
‫takes as the arguments, the current state and an action.
‫And so the first thing that we're going to do
‫is to just lock these two to the console.
‫Now, okay.
‫Now here we got a couple of errors.
‫So let's just comment out all of this code here.
‫So we actually no longer need any of this.
‫And then we also need to include
‫the usereducer hook into our application.
‫Okay, let's maybe reload here.
‫And there we go.
‫Okay, so we have our reducer function
‫but when does this function actually get called?
‫Well, that's where this dispatch here
‫actually comes into play.
‫So we see that the usereducer hook
‫does return the current state,
‫so just like the used state hook.
‫But then instead of also returning a state updating function
‫the reusereducer hook returns as a second thing,
‫this dispatch function.
‫And so this dispatch function
‫can also be used to update the state.
‫It just works in a slightly different way.
‫So let's just call this function right here.
‫And then let's pass in the number one.
‫And actually let's do that in the increment event handler.
‫So the one that is going to be called
‫when we click here on this button.
‫So let's actually click on this button
‫and here we get our output.
‫Let's make this a bit bigger.
‫And so the output that we get,
‫so the console dot log from here is zero and one.
‫Meaning that the state is zero and the action is one.
‫So why is that?
‫Well, it is because the reducer function
‫gets access to the current state
‫as I was saying in the beginning,
‫which right now is zero.
‫So it's this initial state.
‫And then it also gets access to the action,
‫which right now is simply this one
‫that we passed into the dispatch function.
‫So this is basically going to become the action
‫in the reducer.
‫And so the idea of the reducer
‫is to take these two things,
‫so the current state plus the action,
‫and based on that, return the next state.
‫And so let's do that.
‫So all we want to do is to return the state
‫plus the action in this case.
‫And so whatever we return here
‫will then become the new state.
‫And so this means that right now
‫our value here should become one.
‫Let's just reload.
‫And there we go.
‫So our state was indeed successfully updated.
‫Now when we click here,
‫of course nothing's going to happen,
‫but let's fix that.
‫So let's then again call the dispatch function,
‫which in the terms of usereducer,
‫we call dispatching an action.
‫So here we will dispatch an action of minus one.
‫And so then that minus one will get added
‫to the current state,
‫which will then decrease the value.
‫And so that works just fine.
‫Great. Now at this point, this isn't really useful, is it?
‫I mean, we had to do a lot of additional work
‫to get the same functionality as just this, right?
‫But trust me, it will get a lot more useful
‫as we keep going here.
‫So next up, let's think about how we can set the state
‫because remember when we type some number here,
‫we actually want the state to update to that number.
‫So that's what we have here in the defined count.
‫However, this is not going to work really in the same way
‫that we have been doing.
‫So here if we just dispatch
‫E dot target dot value,
‫then that will simply be added to the current state, right?
‫So let's write something here
‫and I will now write a zero so that we then have 10 here.
‫But then as I wrote the zero,
‫it actually added that to the state
‫because well, here we are just adding the action
‫to the current state.
‫And so if I now write another zero,
‫that will just get added to the state
‫that is already here as well.
‫So that's not at all what we want.
‫And so therefore now it's time
‫to actually start thinking about actions here.
‫So basically in this case, we have three actions.
‫We have decreasing the count, we have increasing it,
‫and we have setting it.
‫And so we should actually name these actions.
‫So what we're going to do is to not just pass in this value,
‫but an object which contains the action
‫as well as this value.
‫So let's write type
‫and then let's call this Dec for Decreasing
‫and then Payload and then set it to one.
‫Now, okay.
‫So this object is what we now call an action
‫when we work with reducer functions.
‫And in theory, this object here
‫could have any shape that we wanted.
‫But it is kind of a standard to always just have
‫the type property and the payload property.
‫So actually not playload, but really payload.
‫So this is the standard that you will always see
‫when using the usereducer hook.
‫And the same is actually true later in Redux.
‫So in case you heard of that.
‫So let's do the same thing here as well.
‫So type.
‫This one will be Inc and then the payload here
‫will just be one.
‫Okay? And so now here, instead of just doing this,
‫we now need to account for these different types.
‫So let's say if the action dot type is Inc,
‫well then, return the current state
‫plus action dot payload.
‫Then if it is decrease, then minus.
‫And if the action dot type is set count,
‫which we will create later,
‫well then actually,
‫simply return action dot payload.
‫But let's experiment now with this
‫so that it makes more sense.
‫So let's reload.
‫And first of all, let's see if this works now.
‫And beautiful.
‫So really nice.
‫And now here, let's dispatch also.
‫Actually an action object with a type of set count.
‫And then here the payload
‫will be whatever value is typed into this field.
‫And so now this actually works.
‫So whatever value I type here now
‫is this E dot target dot value.
‫And this will become the payload in this action right here.
‫And so then we dispatch this action to our reducer.
‫And so then that action contains that value.
‫So this 700 right here and the type.
‫And so then based on that type,
‫we decide that the next state should become
‫exactly that value.
‫So that 700 in this case.
‫And if all this sounds and looks really confusing,
‫then please don't worry at this point.
‫So now we are only getting like a overview
‫of how all this works in practice
‫but I will explain you exactly what the usereducer hook is,
‫how it really works, and yeah,
‫we will have some nice diagrams
‫and hopefully by then all of this will make a lot of sense.
‫Now, just to finish here,
‫let's think a little bit more about this.
‫So actually, is there a need to pass in the payload
‫right here and right here?
‫Well, not really,
‫because the reducer should actually know itself
‫what happens when we want to decrease, right?
‫So decreasing and increasing is really just
‫adding or subtracting one.
‫And so we should add that logic here
‫directly in our reducer.
‫So our reducer should know by himself or by itself
‫how to perform these types of actions.
‫And so then we can remove the payload from here
‫and make it a little bit easier to dispatch this action.
‫So the payload property here is optional.
‫And of course here in this case, we still need it.
‫So we basically still need to pass our reducer,
‫this value here.
‫Cause otherwise of course,
‫it would've no way of setting the next state.
‫Now, okay, and so this still works.
‫And with this, we finished the first part
‫of transforming this count state here
‫from a simple use state to a usereducer.
‫And so let's quickly recap what happened here.
‫So this new hook takes in
‫not only the initial state which was zero,
‫but also a reducer function
‫which will always get access to the current state
‫and the action that we pass into the dispatch function.
‫So where does this dispatch function come from?
‫Well, it is one of the things that usereducer returns.
‫So this returns always the current state,
‫which here we decided to call Count.
‫And then it also returns the dispatch function,
‫which we can then use to dispatch actions like this one.
‫So the convention is
‫to dispatch actions that contain a type,
‫and then optionally also a payload,
‫with the goal to pass in some value into the reducer.
‫And so then our reducer function
‫takes the current state
‫and it takes all the information
‫that is contained in the action
‫in order to compute the next state.
‫So usually based on the action type,
‫the reducer then takes some kind of decision.
‫For example, if it's Inc, so increment,
‫then it simply adds one.
‫If it's decrement,
‫then it subtracts one from the current state.
‫And if it's set count,
‫then it will simply set the new state
‫as the value that came in as the payload.
‫And so those values are returned.
‫And so this returned value
‫is what will become the next state.
‫And so then as always,
‫the component is re-rendered and DUI is updated as well.
‫Okay, so hopefully this made a bit of sense,
‫but if not,
‫well we will have lots of opportunities to practice this
‫throughout this section and the rest of the course.
‫Next up, we will also incorporate this step here
‫into our reducer.
‫And so let's do that in the next video right away.