1 00:00:01,320 --> 00:00:06,840 Let's talk about one of the redux plug ins that is probably the most interestingly named redux thunk 2 00:00:06,840 --> 00:00:07,590 . 3 00:00:07,590 --> 00:00:11,570 This library is used to aid with handling asynchronous action creators. 4 00:00:11,640 --> 00:00:16,610 We're going to divide this video in which we discuss redux thunk into two separate sections. 5 00:00:16,620 --> 00:00:21,540 First we're going to discuss why redux thung exists and then we're going to talk about how to use redux 6 00:00:21,540 --> 00:00:22,260 thunk. 7 00:00:22,620 --> 00:00:26,850 The purpose of redux itself is to hold our application state. 8 00:00:26,850 --> 00:00:32,180 One of the great features of redox is that we can change our state in a very well-defined pattern and 9 00:00:32,180 --> 00:00:36,090 it's a pattern that we repeat over and over in our applications. 10 00:00:36,090 --> 00:00:37,560 We call an action Creator. 11 00:00:37,560 --> 00:00:44,280 This produces an action the action flows into our middleware then our reducers and our reducers produce 12 00:00:44,280 --> 00:00:47,790 our new application state which then flows into react. 13 00:00:47,790 --> 00:00:53,370 We then sit around and wait for the user to initiate basically some other change inside of our application 14 00:00:53,400 --> 00:00:56,090 that repeats that process all over again. 15 00:00:56,490 --> 00:01:02,250 So this process as I've laid it out works just fine and dandy for any type of synchronous change in 16 00:01:02,250 --> 00:01:08,940 a redux application by synchronous I mean that when we call an action creator we immediately returning 17 00:01:08,940 --> 00:01:15,690 an action which instantly flows into our middleware and our reducers the vast majority of web applications 18 00:01:15,690 --> 00:01:20,180 we build however need to fetch data through asynchronous channels. 19 00:01:20,220 --> 00:01:25,530 In other words it's much more common that when we call an action creator we actually want to go and 20 00:01:25,530 --> 00:01:32,220 fetch some amount of data from some API or you know some asynchronous action and only when that request 21 00:01:32,220 --> 00:01:35,830 resolves are we actually ready to create an action. 22 00:01:36,270 --> 00:01:41,430 Vanilla redux is not set up for handling this type of operation right out of the box. 23 00:01:41,490 --> 00:01:44,100 So how do we handle these asynchronous action creators. 24 00:01:44,100 --> 00:01:46,510 How do we make asynchronous requests. 25 00:01:46,680 --> 00:01:49,620 That's where redux thung comes into play. 26 00:01:49,650 --> 00:01:55,500 The purpose of redux thung is to give us direct control over the dispatch method the dispatch method 27 00:01:55,590 --> 00:02:02,180 is a method a part of the redux store that contains or application state in this cycle diagram. 28 00:02:02,190 --> 00:02:07,890 You can really think of the dispatch method as handling everything essentially on the bottom right hand 29 00:02:07,890 --> 00:02:15,510 corner when we normally call an action Creator and it returns an action the action ends up being passed 30 00:02:15,540 --> 00:02:17,600 into this dispatch method. 31 00:02:17,760 --> 00:02:21,520 So this is really one of those things that has been working behind the scenes all along. 32 00:02:21,540 --> 00:02:27,290 You have been using the dispatch method in any vanilla redux application you've already been using. 33 00:02:27,480 --> 00:02:30,420 We've already been making use of the dispatch. 34 00:02:30,420 --> 00:02:36,690 You can really think of this dispatch as a big funnel of sorts we call an action creator. 35 00:02:36,690 --> 00:02:42,030 It returns an action and this action kind of falls into our dispatch which makes sure that the action 36 00:02:42,030 --> 00:02:44,760 gets sent off to all of our different reducers. 37 00:02:44,760 --> 00:02:50,070 So you can kind of imagine as being a big funnel or a pipe we throw an action into it and out comes 38 00:02:50,060 --> 00:02:50,980 some new state. 39 00:02:51,000 --> 00:02:53,350 On the other side. 40 00:02:55,280 --> 00:02:59,130 So let's see how redux thunk works in process and in practice. 41 00:02:59,130 --> 00:03:06,420 I have a small re-act application already wired up this re-act application just fetches a list of users 42 00:03:06,480 --> 00:03:09,300 and then renders a single life for each user. 43 00:03:09,300 --> 00:03:13,010 In particular we're showing the users email and name. 44 00:03:13,080 --> 00:03:17,530 And so it's a pretty straightforward application on the redux side of things. 45 00:03:17,550 --> 00:03:21,010 I have a single action creator called fetch users. 46 00:03:21,030 --> 00:03:27,600 The purpose of Fettes users is to make a single API request and then in theory return that data back 47 00:03:27,600 --> 00:03:28,740 to our reducers. 48 00:03:28,740 --> 00:03:34,470 And so I've got a comment right here right now that just says that vanilla redox expects us to return 49 00:03:34,470 --> 00:03:35,730 a simple action here. 50 00:03:35,760 --> 00:03:40,730 And so this is a rule that we don't really want to have to obey when we have a request object here. 51 00:03:40,740 --> 00:03:44,200 I do not yet have any data to return from this function. 52 00:03:44,220 --> 00:03:50,310 I have to wait for my request to resolve before I actually have any data to send across to my dispatch 53 00:03:50,940 --> 00:03:51,830 method. 54 00:03:52,380 --> 00:03:55,160 So let's make use of redux thunk. 55 00:03:55,170 --> 00:04:00,000 The first thing we're going to do with redux thung is we need to realize that the all of the existing 56 00:04:00,000 --> 00:04:03,050 rules for action critter's kind of go out the window. 57 00:04:03,300 --> 00:04:10,170 Vanilla redux expects us to return in action which is a plain javascript object redux thunk on the other 58 00:04:10,170 --> 00:04:16,380 hand enables one other return type and that is a plain javascript function. 59 00:04:16,650 --> 00:04:22,450 So only with redux thung are we able to return a plain javascript function like this. 60 00:04:22,500 --> 00:04:28,050 The first argument to this function that I just added is going to be dispatch method and as a reminder 61 00:04:28,290 --> 00:04:32,840 the dispatch method is essentially that big funnel or that big pipe. 62 00:04:32,970 --> 00:04:39,300 If we pass an action into dispatch it's going to be sent off to all of our different reducers. 63 00:04:39,300 --> 00:04:43,470 So let's write a little bit of code here to complete the exercise and then do a walkthrough on exactly 64 00:04:43,470 --> 00:04:44,760 what it does. 65 00:04:45,240 --> 00:04:51,890 I'm going to wait for my request to resolve with some amount of data and then only when the request 66 00:04:51,920 --> 00:04:53,000 has actually resolved. 67 00:04:53,010 --> 00:04:56,100 Am I going to dispatch an action. 68 00:04:56,100 --> 00:05:03,930 In my case it's going to have type fetch profiles and payload of data. 69 00:05:03,930 --> 00:05:07,410 Now let's give this a shot in the browser and then come back and walk through this code that I just 70 00:05:07,410 --> 00:05:09,770 added over in the browser. 71 00:05:09,780 --> 00:05:11,950 I'm going to refresh my page. 72 00:05:12,060 --> 00:05:17,280 I wait for half a second and the request completes and I now have visible to my. 73 00:05:17,320 --> 00:05:21,270 To me the list of users with all of the respective email addresses. 74 00:05:21,330 --> 00:05:27,690 So this is data that's coming across from some API that's already been set up but that was a little 75 00:05:27,690 --> 00:05:32,280 bit of code that we put down without actually discussing what's going on so let's do a quick discussion 76 00:05:32,280 --> 00:05:33,100 . 77 00:05:33,150 --> 00:05:38,120 Here's a sequence of events of what's going on behind the scenes right now are out. 78 00:05:38,130 --> 00:05:41,760 Component is calling an action creator called fetch users. 79 00:05:41,760 --> 00:05:43,390 And so that's happening inside of apts. 80 00:05:43,460 --> 00:05:51,930 JS whenever the component is about to mount it automatically calls the fetch user's action creator. 81 00:05:51,930 --> 00:05:58,950 Next ASIO's is making requests to our API so we can see that here on line for X-post is automatically 82 00:05:58,950 --> 00:06:00,350 reaching out to the API. 83 00:06:00,510 --> 00:06:07,170 Grabbing some amount of Jaison and returning it to us usually all of our action creators are expected 84 00:06:07,170 --> 00:06:13,350 to return a plain javascript object but because we're using redux thunk we get this additional return 85 00:06:13,350 --> 00:06:15,660 type from our action creator of a function. 86 00:06:15,870 --> 00:06:22,350 So rather than returning a plain object here on returning a function redux thunk which is our middleware 87 00:06:22,980 --> 00:06:30,630 sees that this is a function and not a plain action and immediately invokes the function with the dispatch 88 00:06:30,630 --> 00:06:32,940 method. 89 00:06:33,360 --> 00:06:37,590 Some amount of time passes in which where you can kind of imagine that we're kind of sitting around 90 00:06:37,590 --> 00:06:43,440 here inside of the function and then finally the request is going to resolve some amount of unknown 91 00:06:43,440 --> 00:06:43,820 time. 92 00:06:43,850 --> 00:06:46,820 Or it could be 100 milliseconds or it could be a whole second. 93 00:06:46,830 --> 00:06:48,180 We don't really know. 94 00:06:48,690 --> 00:06:54,780 Once our request resolves with our data we then finally call the dispatch method with our action that 95 00:06:54,780 --> 00:06:57,200 we want to send off to our reducers. 96 00:06:57,270 --> 00:07:00,660 So this is how redux thunk is actually working behind the scenes. 97 00:07:01,110 --> 00:07:05,700 If you'd like to video this video click on the link and the description to go to rally coding dot com 98 00:07:05,760 --> 00:07:07,980 and sign up for my e-mail list. 99 00:07:08,010 --> 00:07:13,830 My name is Steven Greider and once a week I publish videos on the re-act redux and Javascript ecosystem 100 00:07:13,890 --> 00:07:15,800 and I'd love to share them with you. 101 00:07:15,810 --> 00:07:16,470 Happy coding