Instructor: In the last section,
we created our state validator middleware.
We're now going to wire it up to our application
and then we'll be able to test it out inside the browser.
And notice that right now,
we're just console logging out the result of the validation.
So, we're not necessarily doing any, like,
really meaningful notification
of, hey, something just went wrong.
So, to get started, I'm gonna open up my Root.js file,
which is where we're setting up
all of our other middlewares.
And inside of here, I will import the stateValidator
from middlewares stateValidator.
I'll then find the apply middleware call
and I will add it to the apply middleware function.
Remember that we specifically put together
our async middleware function right here
in such a way that it doesn't matter
whether it's the first or second
or whatever middleware inside of our chain.
So, we could safely add in our state validator
to before or after the async middleware
that we just put together.
So, just because, I'm gonna put it second.
Why not?
So, I'll say stateValidator.
And then I'm gonna very quickly save this,
because it's gonna reformat my code,
and make it a little bit more legible for you.
Okay, so, we're now ready to test this out.
I've already restarted my server, with npm run start.
So, my server is currently running.
I'll flip back over to the browser.
And we're just gonna see what happens.
So, I've got my console open here
and let's get started by trying a sign in.
So, you'll notice that when I click
sign in or sign out right here,
I see the true.
So, true means to indicate
that the structure of our state looks A-okay
and we successfully passed our validation.
And we could just as well say, sign in,
post a comment, fetch comments,
and then after a brief delay,
of us actually fetching those comments,
we should see true appear as well.
Because all the comments that we fetched
and added to our redux store are valid as well.
So, it definitely looks like,
you know, as far as we can tell,
this is at least handling the good case
in which our store looks like it should.
So, let's try making it break now.
Let's try adding in a little bit of code
to make our redux store invalid
and try to get some warning to appear down here.
So, in order to break our validation,
I'm gonna open up my comments reducer.
And essentially all we have to do
inside of here is put some value inside
of our array of comments that does not belong.
So, how about this?
Inside of my SAVE_COMMENT: case right here,
I'll say that we're gonna add in
all of our existing comments, the payload,
and then just to make this thing break,
I'm gonna put in an object as well.
Now, again, this is a very contrived example.
Of course, it's very unlikely you're going to do this
in a real application,
but the idea behind this middleware
is to handle cases in really large complex applications
where you might have a lot more complicated logic
going on inside of your reducer.
So, let's now test this out.
I'll go back over.
I'll refresh the application.
And then remember we can trigger that SAVE_COMMENT:
action type right here
by going over to the post form and entering in a comment.
So, I'll sign in.
Post a comment,
type some stuff in,
and then submit it.
And now you'll notice that we have failed validation
because our array of comments
now contains a value type that should not belong in there.
And, so, maybe it's okay,
maybe we can get away with that,
but if I flip back over to the main page,
where my comment list should render out all those things,
you'll notice that we get a pretty nasty error message here.
So, without a doubt, if we had been able to catch the fact
that we put an invalid value inside of our redux store,
well, that would've probably been pretty helpful.
Rather than us having to manually just run
into the error head first.
So, as the very last thing that we'll do
inside of our reducer,
let's add a little bit of logic
to get a meaningful console log.
So, rather than just logging out true or false,
of whether this thing is valid or not,
I'm going to wrap the validation statement.
So, here it is right here,
inside of an if statement, like so.
So, we're gonna say if this thing is not valid.
So, normally if it is valid, this is gonna return true.
If it's invalid, we're going to return false.
So, we're gonna flip that over to a true.
So, if we are invalid,
then I'll do a console.warn
and we'll say something like
Invalid state schema detected,
or something like that.
So, we'll save this
and we'll go try out our application again.
So, back over here,
I'll let my reload kick in.
I'll sign in.
I will try to post a comment.
Now this time when I submit the comment,
we're gonna see a warning up here, down here,
that says; Invalid state schema detected.
And, so, that would be the signal to you and I,
as developers, in the development environment,
that we probably just goofed up
some logic inside of one of our reducers.
And this will be our signal that we need to go
and check out our code and figure out
exactly what's going wrong.
So, that's pretty much it.
That is our state validation middleware.
Again, this has been an example of, you know,
just something that I personally find,
you know, as middleware is kind of useful.
But more importantly, I want to give you an example
of the type of things we can do with middleware.
It's not just about handling asynchronous action creators.
We can do really interesting things with them as well.
And, so, it's really up to you, as an engineer,
to figure out what interesting use cases
you might come up with for your own personal projects.
So, this has been a lot of fun.
Let's take a break here
and we'll continue in the next section.