Coding

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