Redux Middleware Tutorial - Redux Tutorial #5 Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

so there's one more feature about Redux
that we need to cover before we start
tying it into a react application and
that's Redux middleware if you're
familiar with Express j/s at all if
you've ever built a node.js application
with Express redux middleware works a
lot like that a piece of redux
middleware will intercept every single
action that comes through and then it
can either modify that action or it can
actually cancel that action by simply
not calling any of the next things any
of the next middleware so we're going to
go ahead and make a basic middleware
here and then in the next video we're
going to cover how middleware is also
the solution for async actions in redux
like ajax xhr requests so what I did is
I rolled back the code to back when we
had a really simple store with just a
single digit value since we're not going
to really mess with reducers
I can even minimize that reducer code
and I can even get rid of this store
subscribe code right here so let's get
rid of that so we're simply creating a
store we have some actions that we're
firing off so to add middleware it's
very simply you simply add a third
argument to the create store command
I have middleware right there of course
I haven't made it yet so let's pull in
apply middleware from readex and then
we'll go const middleware equals apply
middleware so then any middleware we
want to add in we simply add into this
function as arguments so let's go and
create our first middleware here and
we'll go with a very basic logger and
then here's the syntax for creating
middleware now you're probably not going
to need to create middleware but here's
how you do it if you want to most
middleware you can actually pull in as
an NPM package and just to use it by
just throwing it into apply middleware
we're going to create a simple
middleware here for a logger so it goes
store you basically do a chain of thunks
next and then action and then this is
actually our middleware function that
will fire every single time so I can
just console log action fired and then
the action so you're going to save it or
reload and then I didn't add it in so
let's add that in logger
there we go forgot to add the logger
there we go action
fired action fire dance showing me the
type of action and also it's no longer
let me go and get that store listener in
there again so you can see if it's
actually firing store subscribe store
change you'll notice right now this
state is not ever changing the actions
are firing but we're never calling the
next middleware so we're essentially
terminating every action before anything
takes place so to call the next we
simply fire next and get it the action
that was passed in there you go next
action and now the reducer is actually
firing we're calling the next action
there's no more middleware so it's going
to go ahead and run the reducer so then
we're saying that we're actually
changing the store after the action
fires we could also modify this action
if we wanted to let's say action type
let's make sure it's always decrement if
I get tight there we go so now though it
says Inc because up here it's Inc then
down here it's actually zero negative
one negative two negative three we're
actually firing decrement every single
time so there we go we can actually
modify things I'll get rid of that will
keep Inc and let's go ahead and create a
second type of middleware this time
we'll create an error handler let's
create error let's add error to the list
and then in this case we'll just try the
next action if that fails then we'll
actually log there we go
ah and then we'll actually pass the
error in there so let's go ahead and
make something here that's going to
error let's make a reducer here
let's go else if action-type equals e
then we're going to throw a new error
there you go and let's go then at the
very end let's dispatch an e like
capital e as it was so I'm basically
creating an error here and there we go
ah the error caught it so there we go
the action fired of type e this is my
lager middleware this is my error
handler middleware and then the actual
error never fired we tried to fire it
but nothing happened so all the other
ones went through just fine and that's
how you create an error handler
middleware now of course these would all
live in their own files and whatnot so
in the next video we're going to
actually get into handling asynchronous
actions with middleware