-: In the last section, we finished up our first middleware.
We're now gonna continue by working on a second middleware.
The idea behind the second one is
that you're just gonna get a little bit
of a quick demonstration of what we can do
with middleware inside of a typical Redux application.
I think this next one is pretty interesting.
It might not be the most useful thing
in the world for small projects,
but if you ever work on a larger Redux project
you might actually like the middleware we're gonna make.
So, let's get to it.
Let's talk about what we're gonna build.
So first I wanna do a quick review
of what our current Redux state looks like
inside of our application.
We've got that comments piece of state
that has an array of strings
and then we've got the off piece
of state that is always a Boolean of true or false.
If we were to think about this state
in terms of its schema or kind of its types
we would end up with something down here.
So our comments reducer,
or the comments piece of state
should always be an array that contains strings.
That's what this nomenclature right here
or this syntax is meant to indicate.
Comments should always be an array of strings
and the auth piece of state should always be a Boolean value
and absolutely nothing else.
Inside of our current application,
we've got some pretty straightforward and simple reducers.
And so honestly I think it'd be kind of unlikely
that we'd ever make a big mistake inside
of our reducer and, say, accidentally insert a, like, object
in here in the comments array.
Kind of unlikely, but let's imagine for a second
that our application was a lot larger
and much more complicated than it is right now.
If it was much more complicated
and we had more complicated reducers
and action creators floating around, this might be a risk.
You know, we might be very concerned
about accidentally putting in values
to our state that should not belong there.
If we accidentally put an object
or an array into our comments piece of state,
it would definitely cause our entire application to break;
no two ways about it.
And let's say that for our auth value right here
of being true or false, if we accidentally put it
in a value of something like, I don't know,
a string or something like that
well maybe our application wouldn't break,
but it probably would have some unintended consequences.
So, the idea I'm trying to convey here is that
it'd be really nice if we had some way to, kind of,
confirm that the structure of our state object
was always what we expected to be,
like always an array of strings for that comments thing
and always a comment or a Boolean
for the off piece of state as well.
So that's the idea behind this middleware.
We're gonna make a middleware that's going to
kind of confirm that the structure and the type
of values within our Redux state object
are always what we expect it to be.
So this is primarily going to be a middleware intended
for use in a development environment.
Our middleware is going to watch for incoming actions.
It's not going to actually do anything
with these incoming actions.
Instead, it's just going to immediately send that action
on to the next middleware.
And so eventually this action is gonna flow
down to the reducers.
The reducers will calculate some updated state
and then our application will update.
After the reducers calculate that update
that's when this middleware is gonna kick into gear.
So after the reducers calculate the updated state
the middleware is gonna say, okay
are y'all done doing your update;
like all the reducers ran,
we've got our new version of state?
When that happens, we're gonna pull that new updated
value of state and we're gonna validate the structure
and the type of values in that state object.
And if everything inside there is valid
and we've got the correct values and the correct types
throughout the entire structure, then we're gonna say, okay,
state looks good, we're valid, we're not gonna do anything.
But if it looks like there's ever some invalid value
like let's say we detect that we accidentally put an object
into our comments array right here,
well then we're going to say, nope, not valid.
Some mistaken value is inside of our state object
and we're going to log out a warning
to the terminal or the console inside the browser.
So again, this is really intended
for use during development for you
as a developer to get some feedback to say like,
hey, you just put some bad value into your redux store.
You probably have a bug somewhere.
So that's the idea behind this middleware.
Let's take a pause right now.
We'll come back to the next section and we're gonna talk
about our approach to actually implement this.
So quick break and I'll see you in just a second.