Let's take a look at the solution we're going to use to actually persist our list of cells back to our
API.
So we're going to create a save cells middleware.
This nowhere's job is going to be to watch for actions that get dispatched to have a type of mousel
update cell, insert cell after and delete cell.
Remember, these are all the different action types that can somehow modify the list of cells that are
stored inside of our cells reducer.
So when we start thinking about saving our list of cells, whenever something changes, well, these
are the only things that can actually cause a change.
So if our middleware ever sees one of these actions, that is a sign that our list of cells is about
to change.
So we're going to take that action, forward it onto our store, and then immediately after, we're
going to try to persist our list of cells using the safe cells.
Action creator we just put together.
This diagram is a little bit deceptively simple.
It turns out there are going to be one or two really interesting things we need to think about as we
put this middleware together.
But right now, let's just start to write out the middleware and then just kind of encounter these little
problems in turn.
OK, so back inside my code editor, I'm going to find my state directory.
Inside there will make a new folder called Middlebury's.
And then inside of that, I'll make a new file and I'm going to call this persist middleware instead
of save cells just to have a name that is different than that action creator.
So I will call this persist middleware dot.
It's not the best name, but good enough will deal with it.
In general, I'm going to assume that you are familiar with Redox Middlebury's if you're not totally
fine, just type along and you'll get pretty familiar with what's going on here pretty quickly.
The first thing I want to remind you in general around Middlebury's is that, remember, they've got
that really weird function signature.
So we're going to define and export a function called persist middleware.
And here's where things get weird, remember, a middleware is a function that returns, a function
that returns a function.
So this is why medal winners are just a little bit nasty.
And then remember, each of these different functions get called with a slightly different argument.
So the first one is going to be called with not exactly our Redux store, but it's frequently abbreviated
and just called store.
So this is not exactly our store, like our entire Redock store, but it is an object that is very similar.
Then the second function is going to be called with our next function, which is how we take an action
and for it along to the next middleware, where all of our different reducers and then finally the innermost
function receives our action.
So that's going to be the action that we want to take a look at and determine whether it is the Mousel
update sell, blah, blah, blah, all those different action types.
And right away, we do have to apply a couple of different type annotations to each of these different
functions.
On this store right here, the only thing that we really care about on the entire store object is dispatch.
It's going to structure off just dispatch, and I'm going to annotate it in the same way that we've
annotated the dispatch function inside of our different action creators.
So I'm going to put in this is an object with a dispatch property.
That is of type dispatch.
And then put in action like so.
I'm then going to make sure that I immediately import dispatch and action from the appropriate sources
at the top, so I will import dispatch.
From Redux.
And action from up on directory actions.
Next up, our next function, this is a function that is going to be called with some action that we
want to put it on so we can just annotate this type manually.
We can say that this will be a function.
They'll be called with something that will call action, and it's going to be of type action.
And I don't expect to return anything, so I'm going to put in a return type invitation avoid.
Then finally, our innermost function right here is going to receive some action, which once again
is just going to be of type action.
OK, so now we can start to put together some implementation.
The first thing we have to do is decide whether or not that incoming action has a type of one of these
types.
So we better import our action type in at the top so we can actually do some comparison.
Up here will do import action type.
From up on directory action type's.
Then inside of our middleware itself, we receive on those action types, we want to dispatch that action
creator of save cells.
So let's make sure we also import that action to right away as well.
So I'll get.
Save cells from up on directory action creators.
So then inside of our innermost function right here, the first thing we want to do is take whatever
incoming action is flowing into our middleware and no matter what, we want to pass it on to the next
middleware on our chain.
We're not trying to stop or modify any actions here.
We're trying to pass along every single action that we receive.
The only exception is that we if we receive one of these actions, we want to dispatch an additional
action as well.
So I'm going to put in here next with action right away, because, again, no matter what, we always
want to it on every single action.
Now, at this point, let's just save this file as is and wired up to our Redock store and make sure
that everything works as expected with just this very small amount of code we have.
So I'm going to go back over to my Staats file.
Inside of here at the very top, I'm going to import the fiercest middleware.
We just put together.
Middleware is persist middleware.
And then I'm going to wired up to our applied middleware call, we can put this new middleware before
or after Redux Thunk it doesn't make a difference in this case.
So either location just fine.
Let's then save this.
Go back over to our application, do a quick refresh, and we should still see everything working as
expected.
I should still be able to change the contents of a cell, add a new cell in, or do whatever else I
want to do.
Looks like everything is still good.
So let's take a pause right here and then continue working on our middleware in just a moment.