We've now got a plan put together for the redock side of our application.
Now in this video, we're going to start with the implementation, starting off first with our producer.
So we're going to have one producer called the repositories producer.
We're going to handle a couple of different actions inside of it.
And we're going to eventually have three pieces of state produced by the producer data loading and er
this first implementation, we're going to almost pretend that we are writing out plain JavaScript style
redux code.
So we're not going to worry too much about types.
We're not really going to worry about defining anything else inside of outside files.
I want to just focus 100 percent on the reducer to get started.
So to begin back inside my code editor, I'm going to find the SRT directory inside there.
I'm going to create a new folder called State.
I'm going to place all of my redox related code inside this state folder.
If you do not like the name of the folder, that is totally fine.
You can rename it to anything you want.
Then inside there I will make a new directory called Reducers.
And then finally in that directory, I will make repositories.
Reducer Daugherty's.
OK, so like I said, inside this file, we're going to just pretend that we are writing almost JavaScript
looking code, we're not going to worry about creating extra fancy typescript stuff right away.
So let's first define reducer.
Remember, the reducers is going to receive the arguments of states or whatever the state was the last
time this reducer ran and an action that we need to process.
And then we need to return some kind of state that has these three properties.
So I want you to find.
But just reducer.
And all assigned to it.
A function that would be called with some state and some action.
I'm then going to export at the bottom.
Let's do a default export of reducer.
For right now.
So right away, we're going to, of course, the entire message around these two arguments, we're being
told we have not provided a type for states or action, but we could definitely figure out what type
of state should be, because we have said several times now that we want this repositories reducer to
return an object that has a data property loading.
And er so let's define an interface that describes this argument at the top of the file.
I'll put in an interface.
Of how about repositories state?
I'll say that this has a floating flag that will be a boolean.
An air property that will be either a string or no.
So if we have an air, we will set the air message to air and if there is no air, then we'll just get
it to null to indicate there is no air.
Everything is working as expected.
And then finally, data.
So for data right now, we want this eventually to be an array of those repository objects, we get
back from the NPM API, but for right now we'll just make data, an array of strings, and we're going
to imagine that this array is going to contain the name of all the different packages that we just fetch
from that API.
It's going to make data.
An array of strings like so.
Now I can apply.
That interface to state, I'll say, repositories state like so.
Then for action, we have a very similar air and like I mentioned, for right now, we're just going
to kind of pretend we're almost writing JavaScript style code.
So I'm going to just annotate this as any for right now.
We're going to come back in just a moment and fix it up.
But right now, I'll leave it as any.
Then remember the code that we usually have inside of reducer, almost always a switch statement.
I'm going to set up a switch right away.
I'm going to switch over action type.
We might have a couple of different cases, but first, I'll take care of the case if we do not match
up to any case that we want to use to process this incoming action than our default will be to just
return state.
So we can go ahead and start to add in our a couple of different cases, so the different cases that
we are going to have are these different action types down here.
So our cases are going to be a string of search repositories, search repositories, success and search
repositories area.
It looks like I misspelt repositories in there doesn't really make a big difference because we're going
to eventually well, get the right typing or the right spelling over here.
I'll put in a case of search.
Repositories.
A case of search.
Repositories success.
In a case of Zorch.
Rapports.
The Tories air.
Now we need to handle each of these different cases well, in the case of search repositories, whenever
we see this action, it means that we just started up a new request.
So we need to flip that loading flag over to Tru.
So if we in this first case, I'm going to do a return.
I'm going to return a loading of true.
I'm going to say that whatever air we currently have is not relevant anymore because we just started
up another request.
So if there was an air at the previous request, I don't care about that air anymore.
So I'm going to reset air to be null.
And then finally, I'm going to say that whatever results we had from the last time we tried to fetch
some data don't really matter anymore because we were trying to do a new search right now.
So I'm also going to reset data to be an empty array.
So, again, search repositories will be the action that we see as soon as the user clicks on that search
button.
So I think that all these settings right here make a lot of sense for that.
Next up, if we got back a successful response from the AP, then in that case, we're going to return.
A loading of false because we're no longer loading an air of null because, well, no air probably occurred
because we are seeing the success case right now.
And then finally, our data property, it will be action payload because presumably it's not payload
is going to have all that information about all these repositories that we just found.
We'll do an action packed payload like so.
Then finally, search repositories there, so in this case.
If we see an error, we are probably no longer loading anything because we just got back some response,
presumably there was an error message inside of it.
So I want to say we are no longer loading.
Our air will be action payload because the payload in this case is going to contain the error message
we got back from the API or whatever else went wrong.
And then I'm going to also reset our data property as well to say, well, we just got an error.
So if we had any data, it is probably no longer relevant.
So I'm going to reset it back to an empty array.
OK, so I'm going to save this all the code we have inside of here definitely works no two ways about
it.
We could definitely run this inside of a normal JavaScript project in our application would work just
perfectly.
But at this point in time, we are really not taking advantage of many features of TypeScript.
For example, right now, if I tried to say maybe return instead of a data property right here of an
array, if I instead tried to return a data property that was an object.
Well, chances are if I sometimes have a data property that is an array and other times data that is
an object, I might see something break.
I could also put in data that is a string.
I could put in data that is a number.
These are all cases that I really want TypeScript, to kind of jump in and say, hey, you are kind
of not doing something correctly right now.
So ideally, I think that we need to use TypeScript a little bit more than we are right now and make
sure that maybe this action that we're receiving looks like the kind of argument we are expecting.
In other words, we want to say that action actually looks like an object that has a type and a payload.
And we probably want to make sure that we get TypeScript to take a look at whatever we are.
We are returning from this function as well and make sure that it has the appropriate type of properties
to make sure that we are not returning something with a data value right here that is some kind of number
or something like that, which, again, would probably cause our application to break.
So let's take a pause right here.
Come back the next video and start to apply a little bit more, TypeScript, into this file.