All right.
My friends hopefully you had some success on this exercise if you ran into any problems don't sweat
it.
This really was pretty challenging little exercise.
So let's go through a solution right now together I'll get some inside on my counter screened J.S. file
again that's inside of my screens directory inside of here we're going to go through a identical refactor
to what we did inside of square screen.
So going to first go through here and remove every reference to you state that I can find inside my
component.
I've got the declaration of you state right here where we initially call it.
I'm going to delete that.
And then again to go into my first button element we had a call to set counter said counter doesn't
exist anymore.
So I'm gonna delete everything inside of that on press.
Same thing with a second on press.
And then finally down inside this text element I'm going to delete counter inside of those red brackets
like so
all right.
So now we can start to add some code in.
First off I'll go up to my import statement.
I'll change the you state to use reducer then inside my components.
I'm going to say const.
Remember we're going to d structure these two values that come back when we call use reducer.
The first one is gonna be our state object.
The second one is going to be dispatch.
Remember a better name for dispatch would be like call my reducer but usually by convention once again
we call it dispatch and on the other side we will call use reducer.
I'm going to pass in a reducer.
I don't have one defined inside of just yet but we're gonna write that out in just a moment.
It's going to write reducer Nonetheless even though it's not yet defined.
And then remember as a second argument we're going to pass in some initial state object.
So right away we have to make a decision about what kind of object we're going to have to hold our state.
In other words what different properties will it have.
Now one thing I would mention is that when we make use of use reducer we don't technically have to store
our state inside of an object.
We could instead store a state inside an array or we could just be a plain value like a number that
starts off as zero or even a string.
But usually if you are in a situation where you need to make use of use reducer generally you're going
to want to use an object because remember if we're reaching for use reducer that means that there are
multiple different properties so we want to keep track of.
So again generally we fall back to using an object for our state object with use reducer get so I to
put an object in here and now we need to decide what properties it's going to have.
I think that having a property of like count or counter maybe just count would make a lot of sense.
I'll give it an initial starting value of zero.
Now remember this initial object right here or even our entire state object in general you and I need
to decide what that thing is going to have or what different properties it will have.
So if you decided to use a different property name right.
Right here of like counter or current count or present count or whatever else.
Totally fine.
You do not have to use the same property names as I you just have to stay consistent inside this entire
file.
So going to use count because again I think that makes a little bit of sense.
All right so now we can define our reduce function and define that right above my component so we'll
say counts reducer.
And remember this thing is going to be called with our current state object and our action river action
a better name for that would be like how to change state.
Action is pretty darn unclear in my opinion.
So if you want to call it something else just as a reminder to you.
Totally fine but technically by commune convention once again we call it action OK.
So inside of your before we actually put our switch statement down let's add a couple of comments to
just clarify exactly what we expect state in action to be.
So first off I expect state to be an object very similar to the one we had down here that we passed
in as our initial state.
So it's going to have a count property and that's gonna be a number then as my second argument for action
once again we're going to follow community convention here.
So going to expect this thing has a type property that's a string that describes the change that we
need to make to our state object.
So I will assume that maybe we will have a action with a type property of increment or decrement if
you use different type properties or if you used a different property altogether to decide how to change
your state object.
Totally fine as well is different type properties the different values assigned don't really make a
difference at the end of the day.
All that matters is that if you call your reducer you just have to return the appropriately changed
state object.
That's all now the second thing we might want to think about is whether or not this object needs a payload.
Property in this case our counter is only ever adjusting our current value by one.
So it's ever only ever gonna go up by 1 or down by 1.
So technically we don't really need a payload this time around to describe whether or not we are increasing
our counter by like 1 or negative 1.
So if you left off the payload property that's fine but if you put it on.
That's fine as well.
Technically if you add in the payload property right here you are no longer constrained to updating
your account by 1 every time because you could have a payload of like 15.
And now you could increase your counter by like 15 at a time.
So if you decided to add in that property totally fine.
And if you left it off that's fine as well.
I'm going to add in the payload property here because that's what I showed on our square screen example
of back over here.
So going to kind of assume that you probably added in a payload as well.
Yes.
Now we can do our switch statement.
We're gonna switch over action dot type.
There are two possible cases in case where it's equal to increment and a case where it's equal to decrement
and of course the default case remember the default case is just here in case we accidentally color
reducer with an unknown action type.
Not really likely in this case but nonetheless we throw it in every time.
Anyways so in the default case we'll take care of that right away.
I don't want to make any change to my state object if we hit the default case so I'll just return state
now we can handle case increment so inside of here we're gonna end up with some syntax very similar
to what we saw back inside of square screen.
So I'm going to return a new object because remember we do not modify our state object here so we're
going to return a new object.
We're going to take all the current values out of the state object and throw it into the new one and
then we're going to make a change to our account property.
So our new count is going to be state DOT count plus action dot payload like so to take one of our current
counties and add payload to it.
And once again if you decided to leave off the payload property then you would have probably ended up
with something looks like state DOT count plus 1.
If that's what you did.
Again totally fine.
So now we can handle a case document as well so I'll do a return.
Dot dot dot state inside of a new object and again count it all it's going to be state DOT count.
In this case we'll do minus action dot payload.
Now this starts to lead us into kind of some interesting territory here because you might have followed
a similar pattern as the last component we just worked on.
If you put in a payload that's like negative 1 and then we have minus action not payload right here
we would accidentally end up adding 1 to state account as opposed to decreasing by 1.
So you essentially make need to make a decision either when you call a case decrement you're going to
add whatever action not payload is in which case payload to be a negative number.
Or alternatively you will leave on a minus right here and say that payload is always a positive number
and just describes how much we want to change our current count by because in this case because we have
the type property right here I would say technically the presence of a negative sign there is implicit
or kind of indicated by whether or not we've got a type of increment or decrement.
In other words you just have to go one way or another.
Either you get a minus here and you're never gonna have a minus inside a payload or you've got a plus
here and you're going to reflect negative values inside of payload.
One of the other Now the other thing I want I mentioned very quickly you'll notice we've got a dot dot
dot state here.
And the reason for that was that we wanted to take all the different current values out of state and
throw it into this new object and then overwrite it with this new value right here.
But at present we only have a single value inside of our state object or single property and that's
the count property.
So technically we're doing some like this.
We're throwing.
OK throw count whatever the current value of count is inside this new object and then overwrite count
right away.
So right now because we have is kind of pointless unless we still follow the same pattern because at
some point in the future we might decide to come back and add in some additional properties to our state
object in which case we would need the dot dot dot state.
So essentially what we're doing here is just future proofing.
Even though it's not strictly necessary right now.
All right.
So I think the reducer looks good.
Now we can actually call dispatch and make use of our state value from inside of our JSA ex.
It's going to first find our first button right here whenever someone presses this button we're gonna
call dispatch we're gonna pass in an action object because this is the increase button I'm gonna give
it a type of increment remember that's gonna match the case that we have right here and I'm gonna add
in a payload to describe how much I want to increment by I'll be a payload of 1 and now I can do the
same thing down here inside of decrease as well so I'll do a dispatch with a type of decrement and a
payload of one as well.
And of course if you decided to do state DOT count plus action not payload right here in the decrement
case then instead you would have a payload of negative 1 and then finally we have to print out our current
count so inside of here remember we now have this state variable and inside there is a count property
and that's going to reflect what our current state is or current count is so dense here inside of our
text element we'll do state DOT count and if you decided to use a little bit of D structuring here then
you might just have count instead which is totally fine as well okay so that's pretty much it's going
to save this and we'll do a quick test so I gonna go back to my counter demo I'll increase yep and decrease
Yep works as well.
Perfect.
All right.
If you had any trouble with this exercise as usual don't sweat it the first time you look at all this
reducer stuff it is insanely overcomplicated and again when we start to make use of this reducer stuff
it's really overkill for a counter application we usually start to see reducer stuff come in when we
have some really complicated state objects we're definitely to see examples of that later on INSIDE
THIS COURSE.
OKAY.
So hopefully you've got this exercise but together.
Let's take a quick pause right here and continue in the next video.