ReactJS / Redux Tutorial – #6 Redux Middleware

00:00:00 let's have a look at another feature of
00:00:03 redux middleware this is the flow
00:00:07 diagram you already knew the application
00:00:09 dispatches actions actions are handled
00:00:12 by a reducers the reducer is returned
00:00:15 and you state the state is stored in the
00:00:17 store and to store it and passes this
00:00:19 back to our application
00:00:21 now we haven't hooked up reactions to
00:00:24 read acts yet but we'll do so soon but
00:00:26 the flow is true no matter if we use
00:00:28 react or anything like that or nothing
00:00:30 like we're doing now now mellower allows
00:00:33 us to hook into this process
00:00:35 specifically here once action is
00:00:38 dispatched right before reaching the
00:00:41 reducer and then executing some code for
00:00:44 example logging this action and the
00:00:46 upcoming state change or anything like
00:00:49 that so let's see this in action and
00:00:51 let's see why this might be useful
00:00:53 though you will see every users of
00:00:56 middleware throughout this well course
00:00:58 or throughout the next videos – in order
00:01:01 to use middleware I will go up to my
00:01:04 imports and I'll use or import another
00:01:07 method which is called apply Milla we're
00:01:09 also from the redox package this allows
00:01:13 me to apply semilla wear into my redox
00:01:17 flow as you saw it on the diagram right
00:01:20 before this middleware is set up here in
00:01:23 my store or in the create store method
00:01:26 the first argument here creates their or
00:01:30 sets up the reducer reducers in this
00:01:33 case then we pass the initial state and
00:01:36 empty JavaScript object here as will be
00:01:38 overwritten by the reducers which have
00:01:41 their own initial state and then the
00:01:45 apply middleware method here now the
00:01:49 apply middleware method here takes an
00:01:51 argument and this argument is the middle
00:01:55 of where we want to use currently I
00:01:57 don't have such a mil aware so let's
00:01:59 create a new one let's create it right
00:02:01 above the store I'll name it my logger
00:02:04 so it's a middleware which should lock
00:02:07 something and middleware has this
00:02:11 pattern or is created in this way
00:02:14 it's a couple of fat arrow functions
00:02:18 chained together so we have the store
00:02:22 which is passed into a method which
00:02:26 actually returns us a method which takes
00:02:29 the next method provided by redux here
00:02:33 and then we have this return another
00:02:37 method call which takes the action which
00:02:40 then finally has a function body as we
00:02:43 know it which well allows us to do
00:02:46 whatever you want to do for example say
00:02:48 locked action action and then execute
00:02:57 next action this next call here is
00:03:01 important because next as a method
00:03:03 provided by reread acts package and if
00:03:05 we don't call next well then our action
00:03:09 is not travelling any further it's not
00:03:12 reaching the reducer it's cancelled
00:03:14 we're failing store on state is not
00:03:17 updated so therefore calling next is
00:03:20 important but I could imagine that this
00:03:23 syntax here is a bit strange it's
00:03:26 certainly strange looking in the end
00:03:29 it's just a couple of fat arrow
00:03:30 functions as es6 introduced them and you
00:03:33 can think of it like this the first
00:03:37 function here which gets executed by the
00:03:40 way my lager here yeah it's just this
00:03:43 function here so store is the argument
00:03:47 this is the function body of this
00:03:50 function taking store as an input now in
00:03:54 this function body we simply return
00:03:57 another fat arrow function which takes
00:04:00 the next variable or as we learn method
00:04:05 here as an input now the next method or
00:04:08 function here is a function
00:04:10 automatically passed by redux that's why
00:04:13 this pattern here is so important redux
00:04:15 expects this pattern it wants to pass
00:04:18 the next method here and this fat arrow
00:04:22 function which gets this next action
00:04:26 your function
00:04:27 as an input then returns us yet another
00:04:30 fete error function which takes the
00:04:33 action which was executed and which then
00:04:36 finally has a function body as we know
00:04:38 it where we can write our own code and
00:04:41 then use any of the free arguments we
00:04:45 pass down this chain and that's why you
00:04:49 see federal functions here because
00:04:50 that's the convenient way I can use any
00:04:53 of the arguments here in the final

00:04:56 function which is this one so while it
00:04:59 might look strange just keep this
00:05:01 pattern in mind and in the end you'll
00:05:04 probably not write your own middleware
00:05:06 that often but there are SME useful
00:05:09 third-party milla wares which you might
00:05:11 want to hook in at any point in your
00:05:13 application so what the my log our
00:05:16 middleware created I'm passing it here
00:05:18 in the apply middleware method I'm
00:05:22 calling my logger and I'm not executing
00:05:26 it just passing a reference here if I
00:05:30 save this go back to the application and
00:05:33 reload it now we see a whole bunch of
00:05:38 things being locked to the console and
00:05:41 distorted well that's just the code here
00:05:46 in a subscription whenever the store
00:05:48 changes but the locked action text
00:05:52 that's the one from our middleware
00:05:54 as you can see it always appears right
00:05:56 before we get store updated which makes
00:05:59 sense because as you saw on the slide
00:06:01 the middleware is executed before the
00:06:03 store is changed and before the state
00:06:05 has changed so the lock action or simply
00:06:08 is doing the following of the prints the
00:06:12 action we're about to execute so here
00:06:14 add with a payload of 100 and indeed we
00:06:17 can see the store get updated where we
00:06:20 have now a result of 101 and this error
00:06:22 –air a value of 100 was added and then
00:06:26 here for set H for example we see that
00:06:29 the user reducer indeed changed the H
00:06:33 here to 30 so that is how we can create
00:06:38 our own Miller and use it
00:06:40 nice to know might be helpful but as
00:06:44 it's just sad you'll probably use apply
00:06:48 malware more often in the context that
00:06:50 you want to use some third-party malware
00:06:52 so let's add one and actually a useful
00:06:55 one ASD read acts logger which gives us
00:06:59 a nicer logger than the one I'm using
00:07:01 here so I'll go down to the console and
00:07:03 npm install read acts logger – – safe
00:07:10 here and i'll just split this our
00:07:14 multiple lines here so that it's a
00:07:16 little bit easier to read so logger was
00:07:21 installed and i can now go to the top
00:07:23 here at my import and import logger from
00:07:29 read acts logger i'm not using the curly
00:07:33 braces here because logger or the Redux
00:07:36 logger package here has a default export
00:07:38 which i then import like this again es6
00:07:42 stuff have a look at my video or course
00:07:44 if you want to learn more about this so
00:07:48 i want to use this logger – and i can
00:07:51 use multiple middlewares by simply
00:07:53 chaining them here I add logger though
00:07:56 here I need to execute it why do I need
00:07:58 to execute logger the one I just
00:08:00 imported and not my logger well that's
00:08:03 just how this package Redux logger here
00:08:06 is setup logger which I import here is a
00:08:09 function I actually need to execute to
00:08:12 get again this middleware chain here
00:08:15 could be different but it isn't so we
00:08:17 have to do it like this save this reload
00:08:22 and now it's getting crowded here huh
00:08:24 not really better to see but what you
00:08:27 can see is that the logger here gives us
00:08:32 a much nicer view of the previous state
00:08:36 the action which gets executed and then
00:08:39 the next state so if I remove my logger
00:08:44 here to make it a bit more readable and
00:08:46 maybe comment out this store updated
00:08:50 thing if I save this
00:08:53 and reload now it's much easier to read
00:08:56 Oh Dix Pont is now as you can see we get
00:09:00 a clear view of which actions get
00:09:03 dispatched what the status before this
00:09:05 action is dispatched so here when we add
00:09:08 twenty two we get the old state where
00:09:11 the result is 101 and then we get a new
00:09:14 state where the result is 123 and that's
00:09:17 a nice logger for development purposes
00:09:20 mainly of course probably not something
00:09:22 you will use in your deployment or in
00:09:25 your production app which you want to
00:09:27 deploy but that is how you use
00:09:30 middleware how it can be useful and you
00:09:33 will see another very useful thing you
00:09:37 can deal with middleware in one of the
00:09:38 next videos when we actually have a look
00:09:41 at asynchronous tasks asynchronous
00:09:44 actions for example reaching out to a
00:09:46 server I'm not going to spoil the fun
00:09:48 we'll see it when we're there so let's
00:09:51 instead continue to the next video and
00:09:53 finally finally hook up read acts and
00:09:56 react

You may also like