And welcome back.
One thing I noticed from the previous video is in my Constants file I should make sure that my variable
and my strings are the same.
So just adding an underscore over here, all right.
So let's talk about the next part which is using the other method that comes with react redux which is
connect.
Now this connect function is optimized in order for us to avoid using something called store.subscribe.
So if you remember when we console logged the store in our apt.
Yes we had a few functions including the get state function that we locked.
Now there's also a dot subscribe function which subscribes
any component that is interested to be aware of redux and listen to any changes.
But that's a little tedious and connect simplifies the process by simply saying use the connect function.
and with that we're going to make the component redux aware.
If you remember the connect components would be the yellow little components that know about redux.
So we've created the provider component that essentially passes down the store to the components.
But now we have to say which,
Which one of these react components we want to be smart or be aware that the redux library exists and
they can subscribe to changes.
So I'm going to show you how to do that in this video
and by the way this standard in the industry is that we call these smart components containers kind
of like app.js
So we're most likely going to connect the app.js file because it is a container.
So the very first thing we're going to do is go to app.js file and within here we want to import
a few things.
Let's start off with importing the actions.
So I'm going to import the actions that we have.
Let's go over here.
We have the set search field action.
So we're going to do the setSearchField action and we're going to import that from the actions.js
file and because actions.js file is folder level up since the app.js is in the containers.
I'm going to do the double periods.
Let's save that and we get a nice little warning saying that ... search field is defined
but never used.
Let's also save our index file, perfect.
Let's now use this connect method that I've been talking about.
So now at the top over here I'm going to say import the connect method from react redux and this connect
method,
The way it works.
And again and you just have to get used to it is at the very bottom where we do export default.
We're going to say connect is going to be a function and then another or another brackets around app.
Now this syntax might look a little bit confusing and connect is something we call higher order function.
Now a higher order function is a function that returns another function. So connect is going to run and
whatever connect does inside of this function is going to return another function.
And because it returns another function it's going to run this part with the app.
So that's how higher order components work and you'll learn more about these later on in your career.
But for now just know that this is the syntax you just have to get used to it. Now let's just add a new line
so we can see it better here.
Now within here, connect accepts two parameters which again are standard. I can name them whatever I want
but we're just following the redux standards, which the first one is mapStateToProps and the second
one is mapDispatchToProps.
All right.
So right now we've just connected this component, this app component and said hey subscribe to any state
changes in the redux store.
And now app knows that there is a redux store somewhere and any time that there's changes to it it might
be interested in.
But now we need to tell it what to be interested in.
That is what state should I listen to, what dispatch or what action should I listen to.
So let's go back to the top and at the very top here.
We want to define these functions that, or these parameters. So all we're going to do is say
const mapStateToProps and this is going to receive a state and oops.
And it's going to return
an object
and like I said before you can name these whatever you want but this is the standard and any redux app
you'll just see this or just get used to the syntax.
Once you do it a couple times it becomes second nature.
All right.
And in here we want to say that the search field
state which again if we go to our reducers, we have a search field over here.
This search field state is going to equal a state which we receive dot the part of the reducer which
again if we go to reducers is search robots so searchRobots.searchField
So again it's saying that the search field that we're going to return which is going to be used as props
by the App component is going to come from the state (not Stata) state.searchRobots.searchField
which again comes from our reducer because remember in index.js file we've created the store
with the search robots reducer.
So if we go back here let's save that, and we have MapDispatchToProps is not defined.
And again because we need the second part which is MapDispatchToProps so let's again create that.
We'll say that const mapDispatchedToProps is going to receive something called dispatch.
And again something that, you'll just have to get used to. Dispatch, if you remember in our discussion
about flux is what triggers the action, so an action is just an object that we've created,
again, if you remember. But in order to send this action we need something called dispatch to -
so it gets dispatched into the reducer.
So this dispatch can now be used to send actions, and the way we do that, we can say onSearchChange
which is just the name that - I can say anything.
So remember this is a prop that it's going to receive.
But we're going to keep it the same as the one that we've had in our react app - onSearchChange.
And so this is what the prop is going to be named. And the onSearchChange is going to receive an event
because remember it's a input box that users type, and this event, again because on search change is a
function, is going to dispatch the action setSearchField because remember, the action is just an object
just a function that returns an object.
We want to dispatch that.
So the reducers are aware of it and this search field when it gets dispatched is going to listen to.
If you remember in our actions it's going to receive a text. That is whatever the user has input to it.
In which case we can just do event.target.value again just like we have in the onSearchChange
here, event.target.value
So if I save this, let me make this a little bit smaller and save
now, I have a few little warnings.
One is that remember we need to return this as an object.
So we want to say return just like we did above with the state, an object that contains all of our action.
Again mapStateToProps is telling me what state, what piece state I need to listen to, and send down as
props and mapDispatchToProps says hey tell me what props I should listen to that are actions
that need to get dispatched.
All right everything is working.
We're not getting any errors over here.
And remember now that down here in the connect we know what mapStateToProps is, (what) mapDispatchToProps
is and connect is going to run the first part of the function and say Okay I'm listening to this
part of the state and I'm interested in these actions and then it's going to give those props to the
app.
Here's the exciting part.
Because remember I said redux can replace your state in your app.
I can technically now remove the search field from this.state from the app and I can also remove
onSearchChange because again that's coming down as props.
We don't need to declare it as a method of app. So I can delete that now.
And then down here I'm not interested in this.state searchfield anymore.
I can remove that because now it's coming down as props.
So instead I can say
const searchField with capital F comes from this.props and finally the onSearchChange doesn't come
from this.onSearchChange which was a method of the app.
It comes from the props.
So again I can say onSearchChange and remove the .this . Let's save that.
And again I'll get an error saying that searchfield is not defined because remember, with our redux
state we changed the search field to have capital F.
So if I changed that so it understands that, that's what we're interested in.
Everything is working.
Now here's a little gotcha. Right now because in our index.js file we only have one reducer.
We're creating the store from this, if we go back to app.js
state actually only has one field and that is searchField.
So we would have to do something like this.
In order for it to work. Now we're going to get back to this point, because once we start adding more
pieces of state and more reducers we're going to have to get state from each piece that we're interested
in.
But for now we're going to get back to that we're just going to say state.searchField because if you
remember and console.log store.get state.
We just had the search field.
So let's save that and go back.
All right.
Nothing in the console that's good.
The moment of truth if I type something here.
Look at that.
Everything is working, despite the fact that we no longer have the state for the search field in here
or the method.
Instead everything is going through redux.
And just to test that theory if I go in here, into my setSearchField and instead of having these automatic
return I'm going to say console.log(text) and I'm going to return from here the object so we're just
going to console log to see if the action is coming through.
I save and go back.
Let's open up the tool, the console and look at that.
Everything I type is being sent through the action.
And another cool part is if I go to the reducer and again I test everything out and I say
console.log(action.type) I save this and go back. we see that we have a little funny action that happens.
And this is the default when redux initiates.
But now if I click on anything or type something I get CHANGE_SEARCH_FIELD, CHANGE_SEARCH_FIELD because
the reducer on every action gets run, and says - did CHANGE_SEARCH_FIELD action happen?
If that's the case I'm going to return a new state.
Very cool.
We've just connected our react up to redux and everything works nicely.
There's a bit of boilerplate here and you know you have to remember mapStateToProps,
mapDispatchToProps but once you get used to that syntax, it's really really nice and beautiful the way redux works
and how we've cleaned up everything where everything flows nicely. Just like we mentioned. We've created
an action that gets dispatched into a reducer, a function that based on that action takes the
state and changes it in the store.
And because the store got updated react components that are interested are going to listen to those
changes and make a view change.
Very cool.
All right some more exciting stuff coming up in the next video.
I'll see you in that one.
Bye-bye