Once we have wrapped our application using provider component, up next, we are going to use the connect
function to get the values from the state and of course, eventually also set up the dispatch method.
So once the user clicks any of the buttons while something is happening and I guess I'm going to start
first by setting up these state values.
And what I'm looking for here is in a number I would want to show the amount and my amount will be in
the amount property.
And at the moment it is zero.
And since I would want to see that we are correctly connecting to our store, I'm just going to hardcourt
this to five.
Of course, eventually we're going to have the functionality where this is going to be calculated dynamically.
But at the moment, hard coding is good enough.
Now, let's navigate to now Baja's and then we're looking for our connect function and we need to import
it as a name import.
So let's go with Connect from React Redux and then Connect has a bit of interesting syntax because it
is a higher order component.
Now what that means is that it returns a component itself.
So first of all, we write a connect, then we have first set of premises.
So that's the first function that Connect is returning.
And then this function is looking for the component that is going to be connected to.
So once we do this now, instead of just returning a number, we have access to our state and to our
dispatch method since we wrapped our number in the connect.
And then Connect has a few arguments, but the ones that are most commonly used are the first to my
state prompts and then map dispatch.
Please understand that those are arguments so you can call this breed on banana, but a convention is
to call them map state problems and then map dispatch the prompts and both of them are function.
Now, we're not going to use this patch since there's no functionality in our number.
So we're going to start with our first function and I'm going to go with a common connection.
So I'm not going to be a rebel and I'm going to name mine map state to perhaps.
Of course, I do need to create that function here.
So I go with consed map state to prompt and then in this function, what's really cool as a parameter,
I have access to my store.
Now you want me to prove that.
So if I'm going to type your state, which essentially is just my parameter and if I'm going to go with
council log you'll see that in a console we will see our store.
Now, of course, at the moment it's complaining that we need to return the object and we'll do that
in a second.
But what is more important that in my console I can see that I have the card, I have the total and
I have the amount.
And the way it works is, again, the actual naming already suggest all the functionality.
So we have a map state to props.
So what do you think is going to happen right now?
Effectively, we will map our store to a props of the number.
Now, the cool thing is that we can pick which actual state values we will map so we could technically
map all of it.
But we don't have to since not every component needs to know everything that there is to know about
the state of your application.
And like our error message suggests, we need to return a plain object from our map state props.
And then in that object we set up the prop name.
So in my case, I'm going to go with the Mount and that is the prop that I will have access in number
the same way if we will just pass it down for, let's say, the parent.
And then, of course, I need to sign some kind of value.
So in my case, since I know that I have access to all my store from the state, I can trust state and
then the property I'm looking for is the amount.
Now, I don't need to cancel it and of course I do need to return.
So I have my object and I'm just going to go with return.
And then like I said, we will have in the no amount prop there is equal to whatever I have in my state
under the property ofthe amount.
I will save it and then let's head on up and where we have the number, of course we have access right
now to my amount property.
So I'm going to access my property.
And then just like normal react, I have access to my prop and then instead of hardgoods zero, I'm
just going to go with amount and there you go.
We have a success because right now, no, I have access to a state and more specifically, I have access
to my amount value and my amount value is five because of course, now I had.
But as we're going to be changing our amount dynamically later on, it will also change here in the.
Again, the basic setup is following.
We do need to import the connect.
Connect is higher order component.
So we need to run first set of prices.
So need to invoke it.
And then we have second set of parentheses where we pass in the component and essentially we just export
that component once we have run our connect.
And then in the connect we have few arguments, but the ones that we're going to use the most are the
first one map state the props and the second one that we're going to cover in the few videos.
Map this, dispatch the props and the weight map.
State of Props works is that we have a parameter and that primer has access to all our state.
And then from the function, we do need to return an object and then in the object we're setting up
our property values.
So, for example, what kind of property I'm going to have here, that will be my prop.
So again, if I'm going to name this banana horse up in the Navar, I'm going to be accessing this time
the banana prop and then whatever value I want.
And in this case, I'm just picking from the state, whichever value I would want.
And of course, I said it equal to and now I have access to my amount.
And then in the component I can just display whatever the value, the amount prop has.