- 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