Hey you're still around.
Good to see you again.
All right.
So we just console logged these action types and also did that.
Where did we do that.
We also did that the action part as well.
But I mean this is nice to see but we don't want to console log everywhere in our redux app for all
of our actions.
So let's remove this and go back to the way we had things.
Let me say that and also in the reducer remove our console log.
Now wouldn't it be cool if there was a way for us to come back to our app and still monitor our actions
and debug our applications by just seeing which action got triggered which reducer got triggered.
Luckily for us there's a way to do that.
Now I'm going to show you how it is.
But first I have to admit something: I may have lied a little bit to you.
You see there's actually another part to this diagram that showed you and that's something called middleware.
And don't get scared.
It's quite simple and works similarly to how middleware an express.js works.
It simply listens for actions and it's a tunnel that actions go through and depending on what the middleware
is, it can modify the action or trigger another action.
So they're like triggers that actions go through and something happens within this blue box, before it
hits the reducer.
So why might that be useful for us.
I'm going to show you one thing that it's really really great for. If we go back to index.js file,
we can install something that is a middleware and it's called redux logger.
So let's do that: npm install redux-logger.
All right perfect.
And the way we use this logger, which helps with logging in the console so that we can debug our app really
easily, we can just in here import something called createLogger that comes from the package we just
installed which is the redux-logger package and it's very very simple to use.
All we need to do is say const logger eqals to createLogger.
And now that we have this logger function, which is a middleware, we can apply that to our redux app.
And the way we do that is through the redux package that comes with something called applyMiddleware
and we apply middleware says hey we want to apply some middleware to this flow that we have going on
so we can simply in the create store function have a second parameter that says applyMiddleware and
give it whatever middleware we're interested in.
In our case the logger. So let's say that. I'm going to NPM start here.
And the way we create the logger because this is a function, we need to run the function.
Let's save, go back, we have no console log errors.
But now if I type something into the box you see that I just typed L and the logger the middleware caught
my action and said On top of this action that is going to go into the reducer I want to also console
log this and that's the action.
So I get previous state searchField was blank and then the action that we took was CHANGE_SEARCH_FIELD
with the payload of "l".
And the next state was searchField with an "l".
How cool is that.
We have instant logging in our application and this logger helps us work with our code better.
Here's the exciting part about this. Because right now it's hard to really say why this is useful other
than just getting some logging.
But the beauty with redux is the fact that it made it so simple for you to reason about your app, and
monitor why your app is going through.
You see now we have a clean system for us to monitor
Each one of our actions so that no matter how many actions we have we can always predict what they're
going to do.
We can listen to what logging output each one of these actions happened, because reducer is a pure function.
We always know it's going to return the same state and again because of the way of react works we also
know that as soon as the state changes it's going to make the predictable changes to our view. And with
the middleware we're able to log these actions.
And theoretically we can even go back in time and play out different actions that our users play.
Because we have a list, a chronological list of all these actions
now. this is why I like teaching redux.
It's not because the library will be around for all eternity.
No it will most likely get replaced by something new by other tools and libraries.
But it's a really important library that changes the way we think about building applications instead
of just having messy actions everywhere and just thinking of code or something that we just keep tacking
on and keep building upon and keep adding different features to, redux
makes you think in a way of hey how can I make an app that is able to scale in a way where we have thousands
of user interactions millions of user interactions.
How can we make it so that the information flows from one to another into a predictable view, into a
system that is predictable.
And as a senior developer you really want to think about this, how are you building systems that work
really really well together and are logical and flow nicely.
And that's why redux got its inspiration from database design because databases are similar right.
They are always constantly acted upon.
There's reads, there was writes, and they need a way to make sure that they manage all these people dipping
their hands in the database and doing things, but also avoiding bugs and errors and all these things
at the same time.
This is a bit of a side note but I think it's important to understand this, and this is a good way to
think about things and flow diagrams how data flows through your app and how you should structure your
app so data flows smoothly.
Finally I want to show you another tool. I like the redux logger because it's simple, but Redux DevTools
is really really good and it uses this idea of middleware to listen in on actions and log out for you a
ton of interesting things you can even play back histories and what you did in the app.
It's a really really good tool that you can play around with for now.
We've learned about middleware.
We've created our store and we have a complete picture. Or do we?
There's another part of our app that we need to turn into redux.
So, with that said, I'll see you in the next one. Bye-bye