Let's move back over to our local client project inside there.
You might recall we've got a Sarsae directory with a state folder inside of it.
Inside of state is where our entire redox application lives.
So we're going to start to add in a couple of different actions, action types in action, creators
to save cells and batch cells as well.
We're going to first add in the ability to fetch a list of cells from our API.
Let's take a look at a quick diagram very quickly just to understand what we really need to do here.
OK, so this entire diagram is all about fetching a list of cells, the first thing to understand is
that this is a process we only have to do when our application first starts up.
So when a user first goes to localhost four thousand five and loads up the react application site,
the browser, we want to instantly attempt to fetch a list of cells from our API.
So as a part of that process, when we start putting a list of cells, there's a couple of different
actions we're going to want to dispatch first before we take a look at any of these further boxes inside
of here.
Let me just give you a quick reminder about some of the state we have inside of our redox application.
So back over inside my state directory, I'm going to find cells reducer inside of here, we have the
interface describing our cells reduce our piece of state.
And you might recall we had added in a loading flag and an air flag as well.
And we had said that we would make use of these two properties any time that we started to load or fetch
cells, so just keep those in mind for just a moment.
So as soon as we start to make a request to our API, we're going to probably want to immediately dispatch
an action to make sure that we change that loading flag to true inside of ourselves reducer.
Just so our entire application knows, we are currently attempting to load up some data.
We can then make a request to our API and then depending upon the response we get back whether there
is an error or not, we can dispatch a second action, either update the list of cells inside of her
Doozer or set the air property if one occurred.
So in total to fetch cells.
We are talking about three different action types.
One to describe the fact that we are attempting to load up some data, another to describe finishing
loading the data, and then a third to say, hey, we tried to fetch data, but there was an error during
the process.
The last thing I want to mention very quickly around setting the list of cells, remember, our API
is going to return an array of cell objects, but that is not how we actually store this data inside
of our reducer instead of reducer stores, that list of or stores, all the different cells inside of
a data object.
And there's also that order array as well.
So when we get the response back from our API, we're going have to do a little bit of parsing logic
or essentially just take that array and just process it in some way so we can get our order array and
the data object as well.
So just some stuff to keep in mind.
OK, so now that we understand what's going on here, let's start to add in some of these different
action types, actions, action craters, all that stuff, we'll first begin by adding in some different
action types.
So inside of my action types index dots file.
I'm going to add in first.
Cels.
Batch sells complete.
And finally, vetch sells air.
These are my three different action types, and I bet you could guess what each of them does that sells
in particular is going to describe the fact that we're attempting to fetch a list of cells.
Does that kind of initial action that we're going to use to flip that loading flag over to Drew?
Let's save this next up, we'll go over to our actions inducts file and we'll define a couple of different
action interfaces to go along with these three different action types.
So here's my actions index file.
At the very top, you might recall that we had to find a cell types interface or was an enum, I forget
it was just a plain type inside the cell file.
And inside there, we had also defined a cell interface as well.
We're going to need that interface in just a moment.
So I'm going to update the import statement right here right away to get cell and cell types.
OK, let's then go down to the very bottom of the file.
And right above our expert for type action, we're going to add in an expert or an interface of.
Batch sells.
And we'll fill out the implementation on each of these in just a moment, or really the type definition,
let's first write out the three interfaces.
The next one will be Fetch Sells, Complete Action.
And then Fetch sells air action.
All right, let's go through each of these, the first off on the first one, probably want to type
of action type dots, you guessed it, that sells.
We don't really need any payload in that case.
On the next one, we'll do a type of action type dot that sells complete this one, we probably want
a payload and the payload will probably be whatever response we just got back from the API.
So in this case will probably be our array of cells.
We'll say that the payload is going to be cell array and that's why we just imported the cell interface
at the top of this file.
And then finally, Batch sells air action for this one.
We'll put in our type.
And a payload.
And we're going to have our payload be just a string, just an error message saying, hey, here's what
went wrong.
I'm going to say payload of string.
All right, so there are three different action interfaces we now need to make sure that we combine
all three of these with our overall action type of the very bottom.
It's going to make sure we clean up the semicolon right there and then add on and or I can Glenarden
or know what that really technically means.
But you can kind of think of it that way.
We'll do fat cells action.
I'm just going to copy paste these down just to save some time that cells complete action.
And Fetch sells Aarakshan.
There we go.
OK, so we're off to a pretty good start now.
We'll take a pause right here, come back in just a moment and start putting together our fat cells
action creator.