The next big thing we're going to take care of is making this action creature that will make a request
off to the NPM API.
So we're going to call this thing search repositories and we're going to pass to it some search term.
That's going to be a string.
So let's get to it back inside of my code.
I'm going to find my state directory.
I'm going to make a new folder inside there.
And I will call this action creators.
And then inside there, I will make an index file.
Now, once again, we're going to write our action crater directly inside this file.
But if we started to grow our application in size, I could very easily create another file inside this
directory, not something like repository action creator or something like that, something that kind
of indicates what's inside there and then start to create all these different action craters we want
to have inside of separate files inside that directory.
So we don't necessarily have to create all of our actuators inside of index, not just in this case,
because we've only got one kind of makes sense to just write it out directly inside of your.
OK, then inside of index starts at the very top, I'm going to import a couple of different things
to get started.
First, I'm going to get Axios from Axios because we're going to use that to actually make our network
request.
And then going to import.
Action types we're seeing is just action type is what we call it from up on directory action types.
Action from up on directory.
So then inside of here, we're going to write out our action creator, we are going to be making use
of Redux Thunk in order to write out an asynchronous action creator, because, of course, we do have
to make a network request.
So I'm going to write out search.
Repositories, that's the name of our action creator, it's going to take some kind of search term.
I'm going to annotate that as a string, so that's going to be the name of the library that we are searching
for.
So react, react, whatever else then, because we are making use of redux thunk, I'm going to return
an async function.
That will be coupled with the dispatch function, and for right now, I'm going to annotate dispatch
as any remember dispatch right here.
This is how we manually dispatch actions directly into the store and get those all processed by our
reducer.
Now, inside of this function, we can write out as much async a weight logic as we want.
We can use as much async code.
And then eventually when we get some kind of response or possibly air from the NPM API, we can manually
dispatch some kind of action.
Now, inside of here, the first thing I want to do inside of this function is make sure that we immediately
dispatch an action of type.
Or I guess satisfying the interface search repositories action, because, again, this is going to
be the thing that indicates to our reducer that we are about to make a request to go and find some list
of repositories from NPM.
And this is what's going to turn our loading flag over to true and hopefully eventually will update
our UI to say, hey, we're currently making request.
So in here, I'm going to immediately dispatch an action.
Action type dot search repositories.
After that, we can then start to make our actual request, I'm going to wrap up this request inside
of a try catch block.
So if anything goes wrong with the request itself will end up in the cash statement down here.
And we can dispatch another action to indicate that something just went wrong with our request.
Let's handle that case first.
Let's handle the case or something going wrong.
So down here, if anything goes wrong, I want to dispatch an action and that action should satisfy
the interface of search repositories.
Er so it should have a type of that right there in the payload describing exactly what just went wrong.
It's all put in dispatch.
Type of action type Zorch repositories, er.
And then my payload is going to be the air message property, so that air object right there.
All air objects in JavaScript have a message property.
We're going to take that and provide it as a payload.
That's can be a string describing what just went wrong.
OK, so this is a really good start.
It's now we'll take a very quick pause and then start to write out our actual request logic inside of
our tribe block in just a moment.