Back inside of our middle, where we can now start to add in some logic that's going to see if the incoming
action has a type that matches up with one of these four right here.
And if it does, well, then make sure that we start to dispatch our action creator of save cells,
because it means that we're just about to make a change to the list of cells inside of our reduc store.
So right after next, right here to check to see if the incoming action is one of those types we care
about, we're going to right out if.
And then inside of here, I'm going to list out all the different action types, so we want to watch
for that will put in action type DOT, move, sell.
Action type DOT update Zel.
Insert cell before passing the insert cell after that's where we ended up at and then finally delete
cell.
I'm going to say this really quickly, just so we can see it all nicely formatted, so there's the list
of types you want to watch for and then to see if the action that we were just given has a matching
type onto that array that we created.
I'm going to put on a dot includes action dot type.
So this will return true if the incoming actions type matches one of these four.
Then inside of here for right now, let's just do a along and say I want to save cels.
And it'll be a nice sign to us to decide whether or not we've implemented this stuff correctly.
Then back over inside my browser refresh and I'm going to make sure I open up my console.
So now, as soon as I make any significant change to my list of cells, either the content, adding,
deleting or whatever we should see that comes along.
So if I add in a new cell.
Yupp.
If I delete one, yep, looks good if I move.
I move again if I change the content and if I change the content, so in all these different scenarios,
those are all cases in which we would want to save our list of cells to our backend API.
So I would say that we are definitely doing this logs at the appropriate times right now.
So we can flip back over to our Ed, find that console log and remove it, so our goal here is to somehow
call that action cowriter we just put together of save cells.
So we want to call that thing.
We then want to take the result and dispatch it.
Now, in this case, it's just give me a little bit complicated and we're just getting up, doing a
little bit of a cheat here.
Let me give you just a little bit back story and help you understand the a little bit of the predicament
that we are currently in.
So instead of my action creator's index dots file, remember, we've been writing out a lot of different
action characters inside of here.
Some of these different action creators, such as, say, Mousel, are functions that are going to immediately
return in action, others such as safe cells down here at the bottom.
Our functions that are going to return a redux thunk.
So these are functions that are going to be automatically invoked with dispatch and get states and then
inside of that function somewhere, dispatch is going to be invoked.
So the unfortunate thing here is that calling save cells is just going to be a little bit complicated.
So let me show you what we have to do.
Back inside that if statement inside of our middleware, we're going to call safe cells.
When we called it one time, we're going to get back this inner function that we are currently returning,
that function is expected to be called with our dispatch function.
So we need to receive that function that comes back and then immediately called it when we get back
with dispatch.
We then also need to make sure that we pass along, get state, which at this point in time we did not
actually provide or receive inside of our middleware.
So let's make sure that we update our argument list up here to get get state as well.
And I'm going to update the annotation and add and get state and say that this is going to be a function
that is going to return our state object.
So I'm going to import.
At the top.
Route St..
From up on directory.
Reducers.
So we call get state, we're going to return an object of type or something when we call get state will
return an object of type root state.
So now I'll make sure I pass through get state as well.
I know that this little call right there is a little bit confusing, again, it is all because we wired
up safe cells as though it were a action creature to be used with Redux thunk.
So all because of this signature right here when we initially call safe cells, we're going to get back
function, that we are immediately invoking that function with dispatch and get state.
All right, let's see this look back over to our browser, do a quick refresh.
We're going to see that we still have one little warning right here.
We'll take care of that in just a moment.
But first, let's do a quick test.
I'm going to go over to my network request tab.
And now if I start changing stuff inside of here, I should see a single post request being issued for
every change I make so I can move these things around.
I can delete a cell, I can add a cell, I can change some contents, change some contents, and everything
appears to get posted back to our API.
If I refresh at any point in time, I should see the identical contents appear back on the screen.
Well, I'd say this definitely looks pretty reasonable.
The one exception is the fact that, well, we are doing a post request with every single key press,
maybe not super ideal.
So that might be the last thing that we want to spend just a little bit of time working on.
So let's take a look at that in just a moment.