Coding

ReactJS / Redux Tutorial – #10 Async Actions

  • 00:00:00 by now you should have an idea of how to
  • 00:00:03 create a react + Redux application and
  • 00:00:06 how to structure your project or at
  • 00:00:09 least this is my approach and a commonly
  • 00:00:12 seen approach of structuring such a
  • 00:00:14 project there is one important other
  • 00:00:17 thing I want to touch on before
  • 00:00:19 finishing this series before finishing
  • 00:00:21 this basics series here it's about
  • 00:00:24 asynchronous actions so far all our
  • 00:00:28 actions here are asynchronous there is
  • 00:00:31 no asynchronous actions action amongst
  • 00:00:34 them they're all executed immediately
  • 00:00:36 we're not fetching something from a
  • 00:00:38 server or anything like that now in a
  • 00:00:41 real application you oftentimes have the
  • 00:00:44 use case that you want to reach out to a
  • 00:00:46 server or have some other action which
  • 00:00:48 may take a couple of seconds before it
  • 00:00:50 finishes and with redux you can handle
  • 00:00:54 such actions too or specifically with
  • 00:00:57 third-party packages which can be either
  • 00:00:59 added as malware let's consider the
  • 00:01:03 following action here when I set a name
  • 00:01:07 I don't want to set it immediately let's
  • 00:01:12 say it takes a couple of seconds because
  • 00:01:14 we have to write it to a database and
  • 00:01:16 wait for the answer from the database or
  • 00:01:18 something like that in this case I don't
  • 00:01:22 return a JavaScript object here instead
  • 00:01:26 I return a fat arrow function which has
  • 00:01:31 one argument which is why I can leave
  • 00:01:32 out the parentheses dispatch and this
  • 00:01:37 function here then has let's say a timer
  • 00:01:43 to simulate a server request which takes
  • 00:01:46 a couple of seconds here instead of set
  • 00:01:48 timeout you would reach out to the
  • 00:01:50 server and wait for the answer so let's
  • 00:01:54 say it takes two seconds again just to
  • 00:01:56 simulate it after two seconds this
  • 00:01:59 callback here gets executed that's the
  • 00:02:02 default set timer function again if you
  • 00:02:05 were reaching out to the server you
  • 00:02:06 would probably also trigger some
  • 00:02:08 callback once the data is there in this
  • 00:02:10 callback you then call the dispatch
  • 00:02:13 function
  • 00:02:13 which I'm passing as argument which gets
  • 00:02:16 passed by redux and this dispatch
  • 00:02:19 function expects what a JavaScript
  • 00:02:22 object with the type and then the
  • 00:02:25 payload and the payload would be what
  • 00:02:27 you probably got back from your server
  • 00:02:29 here I'm just setting it equal to name
  • 00:02:32 again so that's a a an asynchronous task
  • 00:02:37 and if I reload my application here you
  • 00:02:40 see I get an error actions must be
  • 00:02:43 playing objects use custom middleware
  • 00:02:46 for a sync actions well it sounds good
  • 00:02:49 that's exactly what we want to do here
  • 00:02:51 so in order to use a custom object I
  • 00:02:54 have to install third-party middleware
  • 00:02:57 or in order to use an asynchronous
  • 00:02:59 action here this middleware is called
  • 00:03:01 read acts funk and I'll also add the
  • 00:03:05 save flag to save it at the package.json
  • 00:03:07 file so read X dot a redux funk get gets
  • 00:03:13 installed here and I want to use it in
  • 00:03:15 my store here when I apply the mill
  • 00:03:17 aware so URL add number import and I
  • 00:03:22 import funk from redux funk and this
  • 00:03:29 middleware is then applied here I have
  • 00:03:31 my logger and then I apply funk without
  • 00:03:35 parenthesis because funk happens to be
  • 00:03:38 an export from this package here which
  • 00:03:41 is not a function e to execute but
  • 00:03:42 instead the middleware the right away
  • 00:03:44 the middleware reread acts that wants to
  • 00:03:47 execute so with that I'm applying this
  • 00:03:50 middleware and if I save it now reload
  • 00:03:53 my application here click on change
  • 00:03:55 username you see after two seconds it
  • 00:04:00 changed to an ax you also saw that this
  • 00:04:03 action was dispatched right away before
  • 00:04:06 then set name was handled here and
  • 00:04:09 that's the asynchronous task which was
  • 00:04:13 handled by func this first one is
  • 00:04:16 undefined one let's see it again
  • 00:04:18 for real OG application we have max here
  • 00:04:21 if I click on this we see the first
  • 00:04:23 action and then after two seconds when
  • 00:04:25 you see the second action
  • 00:04:27 setname and we see that now the name was
  • 00:04:30 indeed changed and that's the funk
  • 00:04:34 middleware at work as you see it's
  • 00:04:36 really easy we only added one package
  • 00:04:39 and then add the middleware and then we
  • 00:04:42 were able to use an asynchronous task
  • 00:04:45 here so redux funk makes using
  • 00:04:49 asynchronous dispatching you're really
  • 00:04:51 simple sometimes or probably often times
  • 00:04:55 you will not use a timeout function here
  • 00:04:58 I'm commenting all of this out here but
  • 00:05:02 instead you will probably use a promise
  • 00:05:07 so it would be convenient if you could
  • 00:05:10 still return your JavaScript object
  • 00:05:12 where you have type of let's say set
  • 00:05:15 name and then you have a payload which
  • 00:05:21 is a promise so let's say this is a new
  • 00:05:24 promise since we're using es6 we can use
  • 00:05:27 the promise here and let me quickly
  • 00:05:31 reorganize this so we have the promise
  • 00:05:33 your promise as you might be aware
  • 00:05:36 otherwise definitely check out some es6
  • 00:05:38 resources has a callback or has a
  • 00:05:41 function as an argument this constructor
  • 00:05:44 of the promise has an function as an
  • 00:05:46 argument where the function has Q inputs
  • 00:05:49 two arguments resolver rechecked which
  • 00:05:51 again our functions we can call and then
  • 00:05:54 here in this promise or in this function
  • 00:05:58 we pass to the promised constructor I'll
  • 00:06:00 again create a timeout function again if
  • 00:06:03 promise is telling you to you definitely
  • 00:06:06 have a look at some es6 resources and in
  • 00:06:09 this timeout callback here inside of the
  • 00:06:11 promise or this function passed to the
  • 00:06:13 promise I'll then call resolve after
  • 00:06:18 after two seconds here let's say and
  • 00:06:21 I'll resolve the name so the promise is
  • 00:06:24 resolved and this would be a typical
  • 00:06:26 setup where you reach out to the server
  • 00:06:28 through some kind of library which also
  • 00:06:31 uses promises and which will also
  • 00:06:33 resolve in the end and then it would be
  • 00:06:35 nice if you could simply use your well
  • 00:06:37 promise call here
  • 00:06:39 your server call here which returns you
  • 00:06:41 a promise so I'm simulating this here
  • 00:06:44 now if I save this click on that now I
  • 00:06:48 get and well an error again because
  • 00:06:52 Redux funk is not able to handle this
  • 00:06:54 and read acts also isn't by default for
  • 00:06:59 this case we would use another
  • 00:07:01 third-party package npm install
  • 00:07:05 it's called Redux promise middleware and
  • 00:07:09 the name is very clear about what it
  • 00:07:12 does in my store the chase file I'll
  • 00:07:16 import this middleware import promise
  • 00:07:20 from redux promise
  • 00:07:25 middleware oh I didn't add it to the
  • 00:07:28 package stretch chase and did I let me
  • 00:07:30 quickly add this a flag so that it is
  • 00:07:33 there once I ship this to the repository
  • 00:07:36 to the github repo so now I have my
  • 00:07:38 promise middleware and I'll add it to my
  • 00:07:41 apply middleware function your promise
  • 00:07:44 and this again is a package where I need
  • 00:07:45 to execute it and you can find out such
  • 00:07:48 things of course in the official
  • 00:07:49 documentation of the packages so
  • 00:07:53 importing redux promise malware should
  • 00:07:56 have it here – yes i do sell with that
  • 00:07:59 safe this reload my application click on
  • 00:08:03 this we don't get the error message but
  • 00:08:07 we also don't see the name change here
  • 00:08:08 though no error message happens we see
  • 00:08:12 we see set name being called and then
  • 00:08:14 set name fulfilled and what's this
  • 00:08:18 fulfilled thing we haven't set this up
  • 00:08:21 right well that's done by this third
  • 00:08:24 party package by the Redux middleware
  • 00:08:26 promise package it takes our action name
  • 00:08:30 set name and adds pending fulfilled the
  • 00:08:34 state it currently is in so in order to
  • 00:08:37 actually do something I need to then
  • 00:08:42 change this year in the reducer to set
  • 00:08:46 name fulfilled I don't change my action
  • 00:08:52 or this is still
  • 00:08:53 setname but here in my reduce room
  • 00:08:57 listening to sets name fulfilled
  • 00:08:59 so again if a reload is click on this
  • 00:09:03 now you saw it change to ana because now
  • 00:09:06 set name fulfilled is handled by my
  • 00:09:09 reducer so that's the alternative way if
  • 00:09:12 you're using a promise and you may use
  • 00:09:14 whichever way you prefer you can either
  • 00:09:17 use the commented out one with the funk
  • 00:09:20 middleware and of course you could also
  • 00:09:22 use a promise in here that would also
  • 00:09:24 work or if you know well it's going to
  • 00:09:27 be a promise and i want you take the
  • 00:09:30 easier way for that promise with this
  • 00:09:33 promise middleware well then this
  • 00:09:35 approach here is the right one just make
  • 00:09:38 sure to listen to underscore fulfilled
  • 00:09:41 here at the end and also make sure to
  • 00:09:44 check out the official github
  • 00:09:47 repositories with the documentation on
  • 00:09:49 these packages on this middleware to
  • 00:09:53 learn more about them and learn how to
  • 00:09:54 use them how to configure them and so on
  • 00:09:57 but that they are the basics about
  • 00:09:59 handling asynchronous tasks in your
  • 00:10:02 react.js redux application