-: In the last section
we generated a schema document to describe our redux state.
We're now going to start
to work on our actual middleware itself.
I'm gonna get started by flipping back
over to my code editor.
And inside my middlewares directory,
I'm gonna make a new file,
called State Validator.
Cause that's more or less what it is.
We're trying to validate the structure of our state.
So inside of state validator, we're gonna write
out our boiler plate for creating a middleware.
Remember, it's that long series
of functions that return each other.
So I'll say export default,
and then we're leave our arguments empty for just a second.
So I'm gonna put in my three functions like so.
So make sure you count that out.
We wanna have three sets of parentheses
and then we'll go back through
and start to fill out the arguments.
So on the first object right here, the first argument list
we're gonna pull off that dispatch property.
On the second one, we get our, excuse me, next function.
There we go.
And then on the last one, we get our actual action.
So then inside of here
we get to decide exactly what we want to do.
Remember we've got that diagram
that we'll take a look at very quickly,
right here.
So the first thing that we want to do is
essentially absolutely nothing.
So unlike the middleware that we worked
on just a moment ago
this one is going to immediately try to send
our action onto the next middleware,
because in this case,
for the schema middleware we are putting together
we really want this action to go down
and hit our reducers and get our updated state.
And then we want to try to run this middleware.
So that's the idea here.
We're going to immediately call next
and pass the action in.
That's going to cause the action to go along to all
of our other middlewares and eventually to the reducers.
And after all that happens,
then we're going to kick our validation logic in.
So to immediately pass the action on
the very first thing we're gonna do
inside this function,
is call next with the action.
Then down here we can write out our actual validation logic.
And that validation logic is only going to occur
after the action has gone through all the rest
of everything else inside of our Redux store.
Okay, so I'm gonna save this file for right now
and I'm gonna pull over our JSON schema
that we just created into a new file.
So inside of my middlewares directory
I'll make another new file,
and I'll call it, How about stateschema.js?
Now, chances are there's a better place
to put this file than inside the middlewares directory,
but for right now, I think that it's good enough.
So I will go back over to that JSON schema tool.
I'm gonna grab this entire blob of JSON right here.
It looks like they got a nice copy button.
And back inside of my state schema.js file
I'll do an export default,
and then I'm gonna paste that entire thing.
I'm gonna make sure that it's an actual valid value.
There we go.
Oh, look at that.
It grabbed all the numbers as well.
Geez, that's nasty.
Let's see if we can copy this without all those numbers.
Nope. How about plane?
There we go.
Let's copy that.
Okay, let's try it again.
Export default, and that's better.
No line numbers.
Okay, so we've now got our state schema inside of here.
And when I save the file
you'll notice that my
code formatter kicks in and removes all those double quotes.
That's totally fine.
This can be essentially the object it is.
It doesn't have to be a JSON thing-a-ma-jig.
So I'm now gonna flip back over,
to my state validator.
Up at the very top, I'm going to import
in the state schema file we just created.
I'm also going to import in that
tv4 library that we just installed
in the last section as well.
So I will import tv4 from tv4,
and I will import state schema from state schema.
So now inside the middleware itself
after we call next with action,
we need to grab our state
and attempt to validate it against our state schema.
The first thing I wanna do is show you how we actually pull
off this validation using the tv4 library.
So I pulled up the documentation for tv4.
Here it is on GitHub.
I can go down to the first example right here.
And yep, this is pretty much all we wanna do.
So we're gonna use tv4.validate.
We're gonna pass in our actual data and then
as a second argument, we pass back or we pass in the schema
and that's gonna return an object that describes
whether or not our object is valid.
Now the second thing I wanna tell you about
is how we actually get all
of our data from our Redux store into this middleware.
Remember, this first argument right here where
we are currently pulling off the dispatch function.
I had said previously there were a couple
of different properties on this first argument.
One of the other properties that is available
to us is a function called Get State.
So this is a function that we can call and when we call it
it will return all of the state within our Redux store.
So that's how we can get access
to all the data that is produced by our reducers.
We just call Get State, and that returns all the data.
So that's basically both parts of the equation.
We've got our validating library, we've got our data
from the Redux store, and we've got our schema.
So let's put it all together.
Inside of here I'll write out tv4.validate.
I'll pass in the second argument of our data
which is gonna be get state
and I'm going to invoke it cuz it is a function.
And then as a second argument,
I'll do state schema like so.
And then for right now,
we'll just do a simple console log of all this stuff
just to see what happens when we run this.
So let's take a brief pause right here.
We're gonna continue in the next section
and we'll test this out inside the browser.