Inside of our own cement function, we now want to take this term piece of state right here and use
it to call our action creator of search repositories.
So that's how we're going to focus on in this video.
We're going to first focus on how we just do this with a kind of normal JavaScript approach.
And then, as usual, we'll take a look at some ways to improve it with some typescript.
I'm going to first get started by adding in an important statement at the very top of use dispatch from.
React redux now, if you are not familiar with this hook right here, this is a hook coming from the,
you guessed it, React Redux library, it gives us access to the dispatch function directly inside of
a component so we can use this function to manually dispatch an action creator.
So just importing used dispatch by itself isn't enough.
We also have to also import our action grader to remember we have already exported all of our different
action graders from the states index file.
We exported something inside of here called action creators so we can import action creators into repositories
list and that will give us access to all the different action creators we have created.
So back inside of our components, I will import.
Action creators.
From up one directory, St..
Then inside of our component, we're going to first use the EU's dispatch hook to get a reference to
the dispatch function.
So for that, we will say dispatch is use dispatch like so.
So, again, this is the same kind of dispatch function that we have access to inside of redox functions
so we can call dispatch and provide whatever action krater we want to eventually invoke.
So I will do a dispatch, I'm going to pass into that action creators, Dotts search repositories and
then pass Interm.
And I want to point out right away how crazy this line of code looks.
This is just way just a lot of code to just dispatch in action.
So this is probably going to work just fine.
But again, I just want to point out, this doesn't look great and surely we can probably think of some
way to somehow condense this and make it just a little bit more convenient to eventually call some kind
of action creator.
And yeah, don't worry, we're definitely going to do that first.
However, let's just say this.
Make sure that we can actually call this action creator, make sure we can see some network request
going off to the API, make sure that we get back some information and make sure that we do not get
any kind of big error messages.
So I'm going to refresh the page, I'll search for react, I'm going to also pull up in my network request
tab.
And I can very easily see, yup, there's my request right there off to NPM, and presumably I'm going
to get back some response that has a bunch of all the phone packages inside of it.
So I would say that definitely looks pretty good.
It looks like we are able to call the action creator.
But as I mentioned, yeah, this code is almost laughable.
It's just not great.
So we definitely need to somehow improve this little bit and make sure that is just a little bit more
convenient to actually call one of our action creators.