We've added in a lot of logic on our side, and we've got an action crater to fetch a list of cells
in an action crater to save a list of cells as well.
Now it's time to wire all this stuff up to the back side of our application.
Before we do so, however, I'm going to go back into my state Staats file inside of here.
You might recall that we've got a lot of logic to manually dispatch a couple of different actions.
I don't really want to do any of this stuff anymore.
I don't want to have a default list of cells being displayed on the screen.
Instead, I want to test the save and fetch action creatures we just put together.
I'm going to take all of these different dispatches that I had added in here manually.
There's four in total and I'm going to delete all of them.
By then no longer need the import for action type at the top, so I'm going to clean that up as well.
OK, looks good now we need to go back over to the back side of our application and figure out where
to call vetch cells and save cells.
I'm going to find inside of our components directory the cell list file, remember, cell list is what
is responsible for rendering a list of cells out onto the screen.
It's kind of the main component inside of application right now.
So I think that this component might be somewhat reasonable to add in, are fetching logic to say that
whenever we are about to show our cell list component on the screen, let's call our fetch cells action
creator.
In addition, let's only worry about batch cells, but right now we'll take care of saving our list
of cells in just a moment.
So to get started, I first need to get access to my action crater inside of a component, you might
recall that we had put together a hook called use actions for that.
So let's import that at the top.
Next, I want to make sure that I only call our fat cells action greeter at a very specific time when
this component is first rendered to the screen.
So for that, I'm going to import the effects from react.
Then down inside my component, I'll first get my PETCH cells action creator by using the hook so that
cells will come from use actions.
Well, then set up my hook of use effect.
I only want to call that function exactly one time, so I'll put in a second argument of an empty array
and then inside their.
I will call vetch cels.
OK, so I'm going to go ahead and say this file and then going to go back over to my terminal.
And I'm just going to make sure that between my process running or the eternal window running, the
CLY and the other one running my NPM run start command inside of our project directory, I should not
see any distinct error messages.
I might see a warning or two, but I shouldn't see any errors.
Let's then go back over to the browser and test this out.
I do want you to know that we are going to get a very small error the first time we run this, but let's
just see what happens.
OK, so when I refresh at localhost four thousand five, I no longer see a starting list of cells appear
on the screen.
And if I open up my network request log, I will see a 404 coming from our cells request.
So this is the request that we were issuing when we are attempting to fetch our list of cells.
So it looks like if we click on that thing, we kind of are getting a response back from our Express
API.
I can kind of tell that based upon the formatting of this error message right here, but we're definitely
not successfully accessing that request handler we had put together.
So this is the very small bug that I put.
I introduced into our application by mistake.
I apologize.
Let me just tell you very quickly what the error is if you go back over to our ED.
And go into our local API index Dotts file.
Inside of here, we had first set up all the stuff around the proxy and then set up our our cells router.
So the issue here is that for every single incoming request, it will always be automatically peroxide.
And that's not what we want.
We first want to attempt at least attempt to make use of some of the different root handlers we put
together inside of our cells router.
And if none of those different root handlers match the URL and the method of the incoming request,
then we want to fall back to making use of our proxy middleware.
So to make sure that's the case, we just have to move the obtuse statement above all of this use proxy
stuff.
Now, whenever a request comes in, we're going to first try to match it inside that router and if it
doesn't match, then we'll follow through to our middleware.
That was a bug.
All right, so let's save that and then we just have to very quickly restart our Seelie the back over
at the terminal, I'm going to restart that node index.
Just serve command.
And now we should be able to go back over to our application refresh.
And then see a status code of 200 from the list of cells.
So, of course, right now we don't have any cells whatsoever, but we at least are successfully loading
up some data now.
We are loading up a list of cells and hopefully passing it correctly inside of our reducer.
This definitely looks good.
It's now the last thing to do is make sure that any time user changes something inside of a cell or
adds a cell or reorders them or anything like that, we need to attempt to save that list of cells to
our API as well.
So let's take care of that in just a moment.