‫Welcome back.
‫So let's now also incorporate the step state
‫into the Reducer that we have been building.
‫So usually we use Reducers
‫when we have some more complex state to manage.
‫So not just one single value as we have been doing here.
‫So what this means is that usually
‫the state is going to be an object
‫and not just one single value.
‫So let's now comment out this here as well,
‫and then let's define an object called initial state.
‫And this again is a pretty common name.
‫And so here let's define our count as zero
‫and then the step as one.
‫So exactly the same default values that we had before.
‫And then here we will now pass in that initial state
‫instead of just the zero.
‫And then here now our state will no longer be called count,
‫but, well, let's call it "Just state".
‫And we could also immediately destructure
‫that state object error, but let's do that here.
‫So let's say count and step destructuring from state.
‫And so now again, we have this function here
‫that we had before, which now no longer exist.
‫Okay.
‫And now also what we have here is not
‫going to make a lot of sense anymore.
‫And so let's just go back
‫for now to our console.log here.
‫Also don't need this anymore.
‫And so let's just quickly reload and click on one
‫of these buttons here, which will then dispatch an action.
‫And here we have our first problem.
‫For some reason, maybe we actually need to return something
‫from there, but let's just try that again.
‫Yeah, so that doesn't really work.
‫So let's just try to return some object from there.
‫So you maybe don't have to even do this.
‫So this is just to avoid that error.
‫And so yeah, now that works.
‫So all I wanted to do here is to now show you the state
‫and the action again.
‫So the state that we now get in the Reducer is the same
‫as this initial step that we passed into use Reducer.
‫And so then we need to return an object with the same shape.
‫So it also contains the count and the step.
‫And so let's now adapt our Reducer function here for that.
‫Now actually it is very common to use a switch
‫statement inside of a Reducer function like this.
‫So instead of multiple ifs,
‫we just do usually a switch.
‫And the value that we want to evaluate is
‫of course the action type.
‫And then we just do one case
‫for well all the possible cases that we can have.
‫So what do we want to return
‫in the case that the action type is decreased?
‫Well, before we were just returning the state plus one
‫but now we can no longer do that.
‫So now we need to return an object
‫with this shape, remember?
‫So how do we do that?
‫Well, first of all,
‫let's set the count based on state.count plus one
‫and then we also need to set the step.
‫But instead of writing it out explicitly,
‫what we do is to spread
‫out the entire current state object here.
‫And then with this part here,
‫we basically override the count property there.
‫And so this is exactly the way that we have been
‫updating objects in the past as well.
‫So basically creating a brand new object
‫which contains all the information of the previous object
‫and then whatever we want to override.
‫Now here I'm getting this warning
‫because we need also a default.
‫And so here in case we basically get an action
‫that is not recognized by our switch
‫we just throw a new error which says unknown action.
‫Well, this is still not happy,
‫but well, let's just keep going here for now.
‫So don't really see what the problem there is.
‫So let's do the other case as well.
‫So to increment is minus one
‫and the error is still not disappearing.
‫But the reason for that is
‫that here we are already returning
‫and so then this code here would be unreachable.
‫Okay, and finally we have this other set count case.
‫So here I'm basically just converting the code
‫that we already had into a switch statement
‫and also to returning an object
‫with the shape again of count and step.
‫All right, so spreading out the state
‫and then the count will be equal to action payload.
‫Okay, so for now, this is going to work exactly
‫the same way as before,
‫except that I did switch here.
‫So here it is, the plus and here the minus.
‫So let's, yeah, now that works.
‫And if I type here, then that also updates the state.
‫Great, and now let's actually do the same thing here
‫for the step.
‫So here we now also want to dispatch an action
‫with a type of set step, right?
‫And the payload is going to be exactly the same.
‫So again, we convert to a number E target value, okay?
‫So set step.
‫And so now here we need to then add a new case for that.
‫And so in this case, we want to return the entire state
‫and set the step this time to action.payload.
‫So that's state, let's reload.
‫And yeah, beautiful.
‫That works.
‫And so now the only thing that we have to do is to
‫actually take this step here
‫into account when we increase and decrease here.
‫So that's easy enough.
‫So that's just state step.
‫And then here of course the same thing.
‫And so now this should become two, yes
‫eight and so on and so forth.
‫Now, okay, let's just get rid of this here.
‫And well, up until this point
‫maybe all of this still doesn't seem so interesting.
‫So everything that we did so far could easily
‫have been achieved with the use data hooks as well, right?
‫But now let's actually do something different.
‫Also, get rid of these here.
‫Okay, so as I was saying,
‫let's do something different.
‫So which is this reset function.
‫So what we did before was to simply take the two
‫state setters and then call both of them
‫but now we can do one big state transition
‫which does all that at the same time.
‫And so that's going to be one
‫of the huge advantages of the use Reducer hook.
‫So especially of course
‫if we had even more states than just these two.
‫So let me show what I mean in practice.
‫So here we can just dispatch an action
‫with a type, for example, reset.
‫And here we don't need to pass any data into the Reducer
‫and therefore we don't need to specify the payload
‫because we can do that right inside the Reducer function.
‫So let's then add that case here as well.
‫So reset.
‫And so then here
‫all we need to do is to return a new object
‫where the count is reset to zero
‫and to step is reset to one.
‫And so here we can essentially update these two pieces
‫of state at the same time,
‫and we can do even better.
‫Let's cut this from here.
‫So this can actually live outside that.
‫Then here we can just return the initial state.
‫All right.
‫And so if I click on reset,
‫then bam, there we go.
‫So our entire state just got reset to its initial state.
‫So all in one go just with one dispatch right here.
‫So all we're doing here actually
‫in these event handlers is to just dispatch.
‫And so we could just move all
‫of these dispatches then here,
‫right into the JSX.
‫So that would actually make a lot of sense
‫but I won't do that right now.
‫But yeah, we could just replace all these event handlers
‫that we have here because all of them
‫all they do is to dispatch actions, the logic itself.
‫So the real logic of what they do is now all centralized
‫in this one Reducer function.
‫And so that is the beauty
‫and the big advantage of the Reducer function.
‫So basically we have all the possible state
‫updates that can happen
‫in our application in this one central place here.
‫And so this makes it really easy to understand
‫the entire application without having to go
‫into all the different components
‫and all the different functions.
‫I mean, of course here we only have one component
‫and it's all really simple
‫but maybe you can start seeing how nice this can be
‫in a bigger application.
‫And in fact, we will see that in action
‫once we start building the big application for this section.
‫But all these advantages will become more clear later on.
‫For now in these two lectures.
‫I just wanted to focus
‫on the mechanics of the use Reducer hooks.
‫So really how it works
‫and especially how this Reducer function here works.
‫But I know that this all looks very confusing right now
‫because I perfectly remember how I felt when I first learned
‫about this quite complex hook.
‫But since we are in the advanced React part
‫now it's time to learn about these more difficult things.
‫But anyway, in the next lecture we will have
‫some nice diagrams that will really illustrate the flow
‫of the data and of the state here.
‫And so stay tuned for that.