In last video I gave you a really challenging exercise.
So if you had problems with this one don't sweat it because I couldn't even throw in some stuff here
that would be a little bit challenging knowing only what we've gone over with the reaction so far.
So let's go through a solution.
We have this application rendered out over here right now that essentially does not do anything at present.
The idea here is that we're going to display some counter variable.
And each time a user clicks on increments we should see that current count increased by one and each
time they click on decrement we should see the current count decrease by one the entire redux side.
This application has already been put together and most of the Riak side has as well.
So all we really have to do is somehow get react and redux to play together nicely.
So in practice that really comes around adding some arguments to the connect function that you see down.
You're right in front of their rapt counter variable.
The first we need to do is get some state out of our redux store that is defined down here and show
some state or show some property inside of our counter component.
So to do so I'm going to define a new function right above wrapped counter called Map state to prop's
remember.
This is going to be a function that is called with our entire state objects from redux.
Then inside there are going to return an object that has a property count and then the value of that
is going to be state count.
Now that right there States count that was big challenge number one.
If you look at the store that we defined down here inside of the store definition is the combined reducers
call.
So I've got a reducer right there that reducer is assigned to the Count property.
So that means that when ever our redux store comes to life it's going to have a property on it state
object called specifically.
Count them again was Challenge number 1.
So now inside of map stage props we're going to pull off that state property from the state object and
we're going to put together this object right here and this object we want to show up as props inside
of our component.
So I'm going to now take the map state to prop's function and pass it as the first argument to the connect
function.
So I'll say map states to prop's like so now I still see a current count right here of 0.
That's because even though we've now passed that thing off to our wrapped counter right here we now
need to make sure that we received the props object inside this component and then make use of some
of the different properties that are on there.
So I'm going to receive the props object.
It's going to have a count property because that is what we are returning from that stage props.
So now inside of my span rather than having the hardcoded zero I will replace it with Rops count like
so now we still see 0 over there.
A very easy way that we could test to make sure that we actually have stuff wired up correctly would
be to change the default value that gets returned from the reducer right here.
So I could find where the count starts off as a default of 0 and replace it with say 10 like so.
And now I see that I have current count of 10.
We still don't have the ability to change that number but we at least can confirm that we are pulling
data out of our redux store and showing it inside the reaction to it.
Now I am going to return the default count value to zero because the test that powered this exercise
expect to see a initial value here of zero Okay.
Now the next thing we need to do is make sure that anytime someone clicks on these buttons we call inappropriate
action create or an attempt to change our state or to action.
Creators are listed up above the component right here.
They are called increment and decrement.
So we need to take these two action creators and pass them inside of an object to the second argument
of the connect function.
So here here's the connect function right here.
I'm going to put in a comma and then I'll put in an empty object like so I'm going to add an increment
is the increment action creator and decrement is the deck Romit action creator.
And again if we wanted to we could easily shorten this up with a little bit of yes 20:15 syntax to be
simply sacrament and increment and if you do so make sure that you still have a comma between the two.
So now because we added in these action creators inside of an object that was passed the second argument
of connect our props object is now going to have two additional properties.
It's going to have an increment function and a decrement function.
So we want to make sure that we call those two functions whenever a user clicks on either the increment
button or the decrement bank button.
So on my first button right here I'm going to add in an on click event handler.
Anytime that someone clicks on that button.
I'm going to call prop's dot increment and notice that I did not put a set of parentheses on here.
I don't need any parentheses because I don't want to call this action creator or this callback right
here when the button is first rendered.
If you put on the parentheses the button is going to be or is that function will be called right away
when the counter function.
Or you need to count component actually gets rendered to the screen and that's not what we want.
We want to pass a reference to this callback function to on click so that it can be called at some point
in time in the future.
Then on my second button I'm going to add on an on click as well.
And whenever someone clicks on this button I'm going to call Rops dot decrement like so
I guess that should be it we should now be able to click on these buttons and see the number go up and
I should be able to click on Dickerman and see the number go down as well.
So that's pretty much the solution like I said.
It was challenging because I kind of made to kind of think outside a little box in a couple locations.
First off wasn't super clear on how you got the current count piece of states.
Now I also have not really told you yet how we pass multiple actions into a single component or multiple
action creators into a single component.
If we have multiple action creators we're just going to add all them to the object that we pass to the
second argument of the connect function.
All right so I'm going to now check my solution.
And there we go.
Looks like everything was done correctly.
So hopefully you had some success here.
I hope it wasn't too frustrating to go through.
Let's take a pause right here.
When we come back the next video we're going to start working on a little bit more challenging project.