1 00:00:00,800 --> 00:00:05,660 Now that we have a better understanding of what middle is are in redux let's start to discuss exactly 2 00:00:05,660 --> 00:00:07,790 what redux thunk does. 3 00:00:07,790 --> 00:00:08,020 All right. 4 00:00:08,030 --> 00:00:12,310 So in this diagram right here I have some normal rules around action creators. 5 00:00:12,410 --> 00:00:18,540 So these are the normal behaviors expected of an action creator inside of a vanilla redux application. 6 00:00:18,680 --> 00:00:22,120 Essentially the exact same redux out that we are working on right now. 7 00:00:22,460 --> 00:00:29,480 So inside of a normal redux application an action creator must return an action object that action object 8 00:00:29,480 --> 00:00:35,540 must be a plain javascript object that has a type property and optionally can also have a payload as 9 00:00:35,540 --> 00:00:36,070 well. 10 00:00:36,890 --> 00:00:38,910 So how does Reducto thunk work. 11 00:00:39,080 --> 00:00:44,510 Redux I think essentially is going to relax these rules right here around an action creator. 12 00:00:44,620 --> 00:00:49,880 Now you might be kind of surprised redux thunk itself is not going to have anything like intrinsically 13 00:00:49,880 --> 00:00:55,560 built into it that says oh yeah just pass me some request object and I'll take it away for you. 14 00:00:55,610 --> 00:01:00,860 That's not the purpose of redux thuck redux onc is an all purpose middleware that allows us to deal 15 00:01:00,860 --> 00:01:05,910 with asynchronous action creators but it also allows us to do many other things as well. 16 00:01:06,170 --> 00:01:12,590 So one thing that redux does is allow us to handle actual creators but that is not its primary purpose 17 00:01:12,980 --> 00:01:17,270 and because of that you're going to see that how redux thunked changes the rules of our action creator 18 00:01:17,270 --> 00:01:20,030 is kind of a little underwhelming almost. 19 00:01:20,180 --> 00:01:20,480 All right. 20 00:01:20,480 --> 00:01:22,620 So let's take a look here. 21 00:01:23,460 --> 00:01:25,470 So these are the rules around an action creator. 22 00:01:25,470 --> 00:01:28,980 Once we have installed redux thunk this is literally it right here. 23 00:01:28,980 --> 00:01:35,130 This is the only change that redux thunked makes to your application which redux thunked installs your 24 00:01:35,130 --> 00:01:40,410 action creator can return in action objects if you return an action object. 25 00:01:40,530 --> 00:01:46,350 It still must have a type property and if it is an action object that gets returned it again optionally 26 00:01:46,350 --> 00:01:47,960 can have the payload as well. 27 00:01:48,620 --> 00:01:55,650 The other thing that redux thunked does it allows you to return either in action object or a function. 28 00:01:56,320 --> 00:02:01,080 And if you return a function redux thunk is going to automatically call that function. 29 00:02:01,090 --> 00:02:02,760 For you that's it. 30 00:02:02,770 --> 00:02:04,750 That is all redux thunk does. 31 00:02:04,960 --> 00:02:08,500 And as a matter of fact you and I are going to take a look at the source code for redux Thumbkin just 32 00:02:08,590 --> 00:02:10,590 a little bit and I'll prove that to you. 33 00:02:10,630 --> 00:02:16,000 I will prove to you that this is the only thing that redux thunked does it allows you to return a function 34 00:02:16,000 --> 00:02:17,310 from an actual creator. 35 00:02:17,470 --> 00:02:23,190 And if you do redux onc is going to invoke or call that function automatically. 36 00:02:23,220 --> 00:02:28,890 So essentially if we put this into code form or we get an understanding or an idea of what redux thunk 37 00:02:28,890 --> 00:02:30,030 allows us to do. 38 00:02:30,480 --> 00:02:38,970 Basically we can return a function that is going to have some logic inside of it like so that is it. 39 00:02:38,990 --> 00:02:41,480 That is all that this thing does. 40 00:02:41,990 --> 00:02:44,690 So you might be thinking OK how does this help us exactly. 41 00:02:44,690 --> 00:02:47,150 How does returning a function and having it be called. 42 00:02:47,150 --> 00:02:48,520 How does that help us at all. 43 00:02:48,770 --> 00:02:53,070 Well let me tell you a little bit more about what redux thunk is really doing behind the scenes. 44 00:02:53,330 --> 00:02:57,990 And then I think this will start to make a little bit more sense as to how it's going to fix our problem. 45 00:02:58,800 --> 00:03:02,020 OK so I'm going to flip back over to a new diagram. 46 00:03:02,050 --> 00:03:03,510 Now this one's a little bit crazy. 47 00:03:03,520 --> 00:03:07,220 This is a flow diagram of what redux thunk is doing internally. 48 00:03:07,300 --> 00:03:10,370 So we're going to zoom into this thing and we'll go through it step by step. 49 00:03:12,370 --> 00:03:18,300 OK so it all starts off up here when we call an action creator so our action creator is going to return 50 00:03:18,480 --> 00:03:19,440 like an action. 51 00:03:19,440 --> 00:03:24,100 I put that in double quotes because we're going to essentially say it can return either an object or 52 00:03:24,100 --> 00:03:24,810 a function. 53 00:03:24,870 --> 00:03:30,850 So maybe rather than action I should say something and I'll update it down here as well. 54 00:03:32,310 --> 00:03:37,290 So now when we return in action creator it's going to return something that is either an object or a 55 00:03:37,290 --> 00:03:38,250 function. 56 00:03:38,250 --> 00:03:42,690 We're still going to take that something and pass it into the dispatch function. 57 00:03:42,690 --> 00:03:48,300 Now remember when we dispatch something the dispatch function it's going to send that thing on to the 58 00:03:48,390 --> 00:03:49,340 middleware. 59 00:03:49,800 --> 00:03:56,370 So after we return something or dispatch it it's going to eventually end up inside of it. 60 00:03:56,380 --> 00:03:57,470 Redux thunk. 61 00:03:57,640 --> 00:04:02,140 And then inside of redux thunk redux thunk is going to take a look at that something and it's going 62 00:04:02,140 --> 00:04:03,050 to say oh hey. 63 00:04:03,070 --> 00:04:03,990 Welcome. 64 00:04:04,000 --> 00:04:07,090 Are you a function or are you an object. 65 00:04:07,090 --> 00:04:09,960 If this is an object right here so no it's not a function. 66 00:04:09,970 --> 00:04:13,530 If this is an object then redux thunk is going to say hey you know what. 67 00:04:13,570 --> 00:04:14,620 Thanks for stopping by. 68 00:04:14,620 --> 00:04:18,320 I'm glad you visited but I don't really care to deal with you at all. 69 00:04:18,340 --> 00:04:23,050 It's a redux I think is going to take any object that shows up and passed along to all the different 70 00:04:23,050 --> 00:04:25,600 reducers inside of your application. 71 00:04:25,600 --> 00:04:31,450 So with Redux I think we still can return to action objects as usual redux thunk is not going to involve 72 00:04:31,450 --> 00:04:35,160 itself in normal action objects in any way shape or form. 73 00:04:36,260 --> 00:04:40,770 Redux think only starts to get interesting if we return a function instead. 74 00:04:41,870 --> 00:04:45,740 So if we return a function right here we're going to start to go into this alternate flow. 75 00:04:47,380 --> 00:04:50,860 So if we return a function redux thunk is going to say Oh fantastic. 76 00:04:50,860 --> 00:04:54,320 I'm happy that you're here I'm happy that a function redux. 77 00:04:54,370 --> 00:05:01,780 Invoke our function and it passes into the dispatch and the get state functions as arguments. 78 00:05:01,780 --> 00:05:08,380 So in other words with this function right here that we returned we are going to receive dispatch and 79 00:05:08,470 --> 00:05:10,910 get States as arguments. 80 00:05:10,960 --> 00:05:15,490 Now the dispatch function is the same dispatch function that we've been talking about quite a bit. 81 00:05:15,520 --> 00:05:18,310 We can pass actions into the dispatch function. 82 00:05:18,340 --> 00:05:21,610 Those actions will be sent through all of our different middleware and eventually forwarding it off 83 00:05:21,610 --> 00:05:28,420 to our reducers to the dispatch function is essentially unlimited power to initiate changes to the data 84 00:05:28,600 --> 00:05:31,160 on the read side of our app. 85 00:05:31,170 --> 00:05:35,510 We've also seen this get state function very briefly back on that code Penn. example as well. 86 00:05:35,520 --> 00:05:35,990 Remember. 87 00:05:36,000 --> 00:05:41,400 Good state can be called on a redux store and that will return all of the data or all the state inside 88 00:05:41,430 --> 00:05:42,980 of our store. 89 00:05:43,110 --> 00:05:47,940 So these two arguments that our function receives are essentially unlimited power over everything that 90 00:05:47,940 --> 00:05:51,210 goes on inside of a redux application through dispatch. 91 00:05:51,210 --> 00:05:57,410 We can change any data we want and to get state we can read or access any data that we want. 92 00:05:59,170 --> 00:06:03,010 So let's imagine for a second that we do exactly what we're trying to do right here. 93 00:06:03,000 --> 00:06:09,370 We're trying to make a request inside this function so we will imagine that redux thunk invokes our 94 00:06:09,370 --> 00:06:11,650 function with those two arguments. 95 00:06:11,650 --> 00:06:17,260 Then inside of our function you and I are going to wait for our requests to finish so we're not going 96 00:06:17,260 --> 00:06:20,740 to be inside of this kind of race scenario that we are back in over here. 97 00:06:20,740 --> 00:06:26,520 We're going to wait to return or dispatch any action until we eventually get a response from our Type-I 98 00:06:26,530 --> 00:06:28,210 code API. 99 00:06:28,210 --> 00:06:33,730 Once we eventually get that response we're then going to use the dispatch function to manually dispatch 100 00:06:33,790 --> 00:06:34,450 an action. 101 00:06:34,450 --> 00:06:35,810 That's the key part. 102 00:06:35,980 --> 00:06:41,890 That is the entire key right there with redux thunk we can manually dispatch an action at some point 103 00:06:41,920 --> 00:06:43,130 in time in the future. 104 00:06:44,500 --> 00:06:50,420 Now when we dispatch an action so we get this new action created right here this can again that can 105 00:06:50,420 --> 00:06:52,760 be a plain javascript object or a function. 106 00:06:52,850 --> 00:06:56,450 But when we're dispatching it manually from redux thunk we're inside of that function. 107 00:06:56,450 --> 00:06:59,810 It's basically always going to be a plain object. 108 00:06:59,810 --> 00:07:01,620 So we're going to dispatch this action. 109 00:07:01,820 --> 00:07:04,090 It's going to flow back into dispatch. 110 00:07:04,100 --> 00:07:10,370 This batch is going to send it right back into redux thunk redux thunk is going to say OK are you a 111 00:07:10,370 --> 00:07:11,970 function or an object. 112 00:07:12,110 --> 00:07:13,900 In this case it's going to be an object. 113 00:07:13,940 --> 00:07:19,310 So we're going to have redux think automatically for that thing onto all of our different reducers and 114 00:07:19,310 --> 00:07:20,900 that's pretty much it. 115 00:07:20,900 --> 00:07:26,870 So the real takeaway here is that with redux thunk we can return a function if we do that function will 116 00:07:26,870 --> 00:07:33,770 be invoked with the dispatch and get state arguments and with those two functions we have unlimited 117 00:07:33,770 --> 00:07:35,600 power over a redux store. 118 00:07:35,600 --> 00:07:40,820 We can change any data and we can read any data and so at any point in time in the future for example 119 00:07:40,820 --> 00:07:45,830 after our request completes we can then manually dispatch an action and update the data inside of our 120 00:07:45,830 --> 00:07:47,400 store. 121 00:07:47,400 --> 00:07:49,910 OK so that's pretty much everything about redux stock. 122 00:07:49,910 --> 00:07:50,930 Now the last thing on do. 123 00:07:50,930 --> 00:07:51,570 Very quickly. 124 00:07:51,590 --> 00:07:53,150 I know this is a long video. 125 00:07:53,240 --> 00:07:54,960 I just want to show you this very quickly. 126 00:07:55,100 --> 00:08:00,620 I want to have you take a quick glance at the source code of redux thunked itself. 127 00:08:00,620 --> 00:08:03,840 So here's the link to the repository for redux thunk. 128 00:08:03,860 --> 00:08:06,920 I'm going to open up a new browser tab and navigate over there. 129 00:08:08,810 --> 00:08:11,330 So again redux thunked repository. 130 00:08:11,330 --> 00:08:14,180 I'm going to find the SIRC folder inside there. 131 00:08:14,340 --> 00:08:19,100 Inside it they're going to find the single file that really makes up the source code for redux thunk 132 00:08:19,370 --> 00:08:24,410 just this index such as file and believe it or not that is it. 133 00:08:24,410 --> 00:08:26,410 That is all of redux thunk right there. 134 00:08:26,420 --> 00:08:28,740 A total of 14 lines. 135 00:08:28,820 --> 00:08:33,890 And in reality only like 6 or so lines actually do anything. 136 00:08:34,070 --> 00:08:36,640 All the other lines inside of here is this right. 137 00:08:36,650 --> 00:08:40,300 Is kind of like an extra object or an extra option. 138 00:08:40,310 --> 00:08:44,900 This is kind of an initialization step and we've got a function declaration at the top and an export 139 00:08:44,900 --> 00:08:46,400 default at the bottom. 140 00:08:46,400 --> 00:08:47,490 So again this right here. 141 00:08:47,510 --> 00:08:48,040 That is it. 142 00:08:48,050 --> 00:08:49,330 That is the whole shebang. 143 00:08:49,340 --> 00:08:51,900 That is all redux thunked really does. 144 00:08:52,260 --> 00:08:55,930 You'll notice on line 2 there is some kind of crazy syntax right here. 145 00:08:55,940 --> 00:08:57,030 I know that looks nasty. 146 00:08:57,050 --> 00:09:02,330 Essentially what is happening is we have a series of functions that return functions very similar to 147 00:09:02,330 --> 00:09:02,640 how. 148 00:09:02,660 --> 00:09:07,390 Right now you and I are defining a function that returns a function. 149 00:09:07,470 --> 00:09:12,150 But if you look in the body of that thing you'll see the actual logic of what's going on. 150 00:09:12,220 --> 00:09:13,310 Redux thunk is sane. 151 00:09:13,430 --> 00:09:15,990 OK did you just return or see me. 152 00:09:15,990 --> 00:09:18,040 Did you just dispatch an action. 153 00:09:18,340 --> 00:09:18,970 If you did. 154 00:09:18,970 --> 00:09:20,290 Is it a function. 155 00:09:20,290 --> 00:09:26,380 If it is a function then redux thunk is going to invoke that action with dispatch and get state and 156 00:09:26,410 --> 00:09:27,970 an optional extra argument. 157 00:09:27,970 --> 00:09:32,960 But you and I are not going to make use of that at any point in time if our action was not a function 158 00:09:33,230 --> 00:09:37,730 then redux thunked essentially says oh I don't care about this this action. 159 00:09:37,760 --> 00:09:38,540 It's an object. 160 00:09:38,540 --> 00:09:43,490 I don't care about it so I'm going to send it on to either the next middleware or all that different 161 00:09:43,490 --> 00:09:44,130 reducers. 162 00:09:44,150 --> 00:09:47,420 If there are no other middleware to run so that's it. 163 00:09:47,420 --> 00:09:51,360 It is amazingly simple and straightforward when you actually look at the source code. 164 00:09:51,400 --> 00:09:54,570 But of course understand it is a little bit more complicated. 165 00:09:55,040 --> 00:09:59,330 OK so now that we have a better understanding of exactly what redux thunked does we'll take a quick 166 00:09:59,330 --> 00:09:59,910 pause. 167 00:09:59,960 --> 00:10:04,100 We'll come back in the next video and we're going to do a real factor to our fetch posts action creator 168 00:10:04,310 --> 00:10:05,980 to truly make use of redux think.