1 00:00:00,810 --> 00:00:01,643 Speaker: In the last section, 2 00:00:01,643 --> 00:00:03,510 we wired up the reduxThunk middleware 3 00:00:03,510 --> 00:00:05,040 to our create store call 4 00:00:05,040 --> 00:00:06,900 along with the Apply Middleware helper 5 00:00:06,900 --> 00:00:09,954 inside of our Route index.js file. 6 00:00:09,954 --> 00:00:10,787 We will now continue by starting 7 00:00:10,787 --> 00:00:13,980 to put together our signup action creator. 8 00:00:13,980 --> 00:00:16,440 To get started, I'm going to create a new directory 9 00:00:16,440 --> 00:00:20,790 inside my source folder called Actions. 10 00:00:20,790 --> 00:00:21,930 And then inside of Actions 11 00:00:21,930 --> 00:00:24,180 we'll make the two files that we usually see 12 00:00:24,180 --> 00:00:27,480 the types file and the index.js file. 13 00:00:27,480 --> 00:00:32,100 We'll first begin with the types.js file inside of here. 14 00:00:32,100 --> 00:00:34,410 We'll just create one type for right now. 15 00:00:34,410 --> 00:00:38,460 We'll make it the export const out. 16 00:00:38,460 --> 00:00:40,440 We're gonna call it auth user, 17 00:00:40,440 --> 00:00:42,690 rather than calling it something like Signup User. 18 00:00:42,690 --> 00:00:44,100 You'll see why in just a moment. 19 00:00:44,100 --> 00:00:45,450 But for right now, just bear with me. 20 00:00:45,450 --> 00:00:47,400 We're gonna call it the auth user type. 21 00:00:48,270 --> 00:00:50,523 And so I'll give it a string of auth user. 22 00:00:51,810 --> 00:00:53,340 Then inside the Actions folder, 23 00:00:53,340 --> 00:00:57,660 I'll make a new file called index.js. 24 00:00:57,660 --> 00:01:01,350 At the top, we'll import that action type that we just made. 25 00:01:01,350 --> 00:01:06,350 So we'll do our import auth user from types 26 00:01:07,740 --> 00:01:11,190 and then underneath that we'll make our action creator 27 00:01:11,190 --> 00:01:12,617 called simply signup. 28 00:01:14,914 --> 00:01:15,840 So signup is going to be called 29 00:01:15,840 --> 00:01:19,440 with the email and password from our form. 30 00:01:19,440 --> 00:01:22,260 So we'll receive that, those two arguments like so 31 00:01:22,260 --> 00:01:24,930 and then we can open up our action creator. 32 00:01:24,930 --> 00:01:27,150 Now, just a moment ago, we added reduxThunk 33 00:01:27,150 --> 00:01:28,050 to our application 34 00:01:28,050 --> 00:01:29,910 and I had mentioned that I'm going to assume 35 00:01:29,910 --> 00:01:33,030 that you've not made use of reduxThunk before. 36 00:01:33,030 --> 00:01:35,280 So in this section, we're gonna go through a quick overview 37 00:01:35,280 --> 00:01:37,650 of reduxThunk and try to get a better understanding 38 00:01:37,650 --> 00:01:39,810 of what it does for us. 39 00:01:39,810 --> 00:01:41,250 The first thing I want to point out to you here 40 00:01:41,250 --> 00:01:44,370 is that we are looking at a very typical action creator. 41 00:01:44,370 --> 00:01:47,190 We might call it, and then inside the Action creator, 42 00:01:47,190 --> 00:01:50,610 it's our duty to always return an object 43 00:01:50,610 --> 00:01:52,470 that has a tight property, 44 00:01:52,470 --> 00:01:55,200 maybe auth user or whatever, 45 00:01:55,200 --> 00:01:57,753 and then a payload of whatever. 46 00:01:58,740 --> 00:02:01,380 So that's what our action creators usually look like. 47 00:02:01,380 --> 00:02:04,350 We usually return an action 48 00:02:04,350 --> 00:02:06,450 and then magically this action is taken, 49 00:02:06,450 --> 00:02:08,370 it gets sent to our middleware, 50 00:02:08,370 --> 00:02:10,320 it gets sent to our reducers. 51 00:02:10,320 --> 00:02:12,960 The reducers produce our new state 52 00:02:12,960 --> 00:02:15,570 and that flows back into our components. 53 00:02:15,570 --> 00:02:18,330 So typically we have a flow that looks a little something 54 00:02:18,330 --> 00:02:19,800 like this. 55 00:02:19,800 --> 00:02:21,210 So we got our action creator up here 56 00:02:21,210 --> 00:02:23,580 returns the action that goes to our middleware 57 00:02:23,580 --> 00:02:25,380 which then eventually the action goes to 58 00:02:25,380 --> 00:02:26,913 our reducers as well. 59 00:02:27,930 --> 00:02:31,080 Now, this entire process of taking that action 60 00:02:31,080 --> 00:02:32,460 and sending it through our middleware 61 00:02:32,460 --> 00:02:35,460 and our reducers is all facilitated 62 00:02:35,460 --> 00:02:40,460 by a function tied to Redux called the dispatch function. 63 00:02:40,890 --> 00:02:43,770 So the dispatch function belongs to Redux, 64 00:02:43,770 --> 00:02:45,000 you give it in action, 65 00:02:45,000 --> 00:02:48,090 so just a plain JavaScript object with a tight property 66 00:02:48,090 --> 00:02:51,218 and the dispatch function is going to automatically funnel 67 00:02:51,218 --> 00:02:54,450 that action object through our middleware 68 00:02:54,450 --> 00:02:56,340 and through our reducers. 69 00:02:56,340 --> 00:02:59,250 I personally like to think of that dispatch function 70 00:02:59,250 --> 00:03:02,760 as kind of being like a big funnel of sorts. 71 00:03:02,760 --> 00:03:03,780 So inside this diagram 72 00:03:03,780 --> 00:03:05,850 we've got our action creator at the top. 73 00:03:05,850 --> 00:03:07,470 It returns an action 74 00:03:07,470 --> 00:03:10,560 and that action automatically gets funneled, 75 00:03:10,560 --> 00:03:12,240 like I said, that's kinda like the keyword, 76 00:03:12,240 --> 00:03:14,340 that's what I like to imagine here. 77 00:03:14,340 --> 00:03:17,880 It gets funneled into that dispatch function. 78 00:03:17,880 --> 00:03:19,740 Dispatch then takes it, passes it 79 00:03:19,740 --> 00:03:22,680 to all of our middleware, all the different reducers, 80 00:03:22,680 --> 00:03:24,723 and our application state updates. 81 00:03:25,740 --> 00:03:27,990 So it's very clear that this dispatch function 82 00:03:27,990 --> 00:03:30,720 right here is a very powerful little function 83 00:03:30,720 --> 00:03:32,880 and it's how we really initiate change 84 00:03:32,880 --> 00:03:35,280 within our Redux application. 85 00:03:35,280 --> 00:03:36,720 So let's now kind of pivot a little bit 86 00:03:36,720 --> 00:03:40,110 and talk about why this is relevant to reduxThunk. 87 00:03:40,110 --> 00:03:43,050 Let's first begin by flipping back over to our code editor. 88 00:03:43,050 --> 00:03:45,660 I'll find my signup action created right here 89 00:03:45,660 --> 00:03:48,633 and I'm gonna make a little change to this action creator. 90 00:03:49,650 --> 00:03:54,650 So rather than returning an object from this thing 91 00:03:54,750 --> 00:03:57,753 I'm going to instead return a function. 92 00:03:58,920 --> 00:04:00,750 And this function is going to be called 93 00:04:00,750 --> 00:04:04,533 with a single argument that we're going to call dispatch. 94 00:04:05,610 --> 00:04:07,800 So this argument right here of dispatch 95 00:04:07,800 --> 00:04:10,680 that is the D's dispatch function 96 00:04:10,680 --> 00:04:13,680 and this is what reduxThunk allows us to do. 97 00:04:13,680 --> 00:04:16,769 When we add reduxThunk as a middleware to our project 98 00:04:16,769 --> 00:04:20,160 it allows us to return a different value type 99 00:04:20,160 --> 00:04:21,930 from our action creators. 100 00:04:21,930 --> 00:04:24,540 So solely because we have installed reduxThunk 101 00:04:24,540 --> 00:04:28,560 we can now return either an action object 102 00:04:28,560 --> 00:04:31,773 or a function from our action creators. 103 00:04:32,730 --> 00:04:35,370 If we return a function, that function will be 104 00:04:35,370 --> 00:04:38,670 automatically called with a dispatch function. 105 00:04:38,670 --> 00:04:40,890 Remember what we just spoke about a moment ago? 106 00:04:40,890 --> 00:04:42,420 If we take the dispatch function 107 00:04:42,420 --> 00:04:44,700 and we pass an action into it 108 00:04:44,700 --> 00:04:46,410 that action will be automatically sent 109 00:04:46,410 --> 00:04:48,000 off to all of our middleware 110 00:04:48,000 --> 00:04:51,240 and all of our actions inside of our application. 111 00:04:51,240 --> 00:04:53,820 So by having the ability to return a function 112 00:04:53,820 --> 00:04:55,503 that gets called with dispatch, 113 00:04:56,398 --> 00:04:58,650 we gain the ability to return or dispatch 114 00:04:58,650 --> 00:05:03,650 as many actions that we want from a single action creator. 115 00:05:04,740 --> 00:05:08,370 So now inside this inner function, I could call dispatch 116 00:05:08,370 --> 00:05:11,967 and pass in an action of type auth user. 117 00:05:15,030 --> 00:05:17,730 And I'm not limited to doing that just one time. 118 00:05:17,730 --> 00:05:20,610 I can do that as many times as I wish. 119 00:05:20,610 --> 00:05:23,340 In addition, if we had a promise of some sort 120 00:05:23,340 --> 00:05:25,560 or we were making an asynchronous request 121 00:05:25,560 --> 00:05:28,510 inside this thing and we had some request object 122 00:05:29,970 --> 00:05:31,830 we could wait for that promise to resolve. 123 00:05:31,830 --> 00:05:33,443 So we could say, you know, wait for the then 124 00:05:33,443 --> 00:05:36,630 and then inside of our callback that gets invoked, 125 00:05:36,630 --> 00:05:38,340 when that request gets resolved 126 00:05:38,340 --> 00:05:41,400 we could dispatch an action as well. 127 00:05:41,400 --> 00:05:43,980 So this is the purpose of reduxThunk. 128 00:05:43,980 --> 00:05:46,230 It allows us to get total control 129 00:05:46,230 --> 00:05:49,110 over the dispatch process. 130 00:05:49,110 --> 00:05:50,610 Inside of one action creator 131 00:05:50,610 --> 00:05:53,670 we can dispatch as many actions as we wish 132 00:05:53,670 --> 00:05:57,003 and we could dispatch them at any time that we wish as well. 133 00:05:57,840 --> 00:05:59,940 So you can really think of reduxThunk 134 00:05:59,940 --> 00:06:01,950 as being an alternative approach 135 00:06:01,950 --> 00:06:03,780 to asynchronous action creators. 136 00:06:03,780 --> 00:06:07,230 That's just a little bit different than Redux Promise. 137 00:06:07,230 --> 00:06:09,150 With Redux Promise, we are still limited 138 00:06:09,150 --> 00:06:12,690 to returning one action creator or one action, and 139 00:06:12,690 --> 00:06:15,810 that action has to have a promise on the payload property. 140 00:06:15,810 --> 00:06:18,600 So Redux Promise is a little bit more straightforward, 141 00:06:18,600 --> 00:06:20,460 but it's also more limited. 142 00:06:20,460 --> 00:06:24,000 We can only ever return that one promise. 143 00:06:24,000 --> 00:06:27,120 With reduxThunk, we can make as many requests as we want. 144 00:06:27,120 --> 00:06:28,770 We can wait as long as we want. 145 00:06:28,770 --> 00:06:31,590 We essentially can do anything we want inside 146 00:06:31,590 --> 00:06:33,240 of our action creator. 147 00:06:33,240 --> 00:06:35,760 And then only when we complete some request 148 00:06:35,760 --> 00:06:36,960 or we get back some data 149 00:06:37,925 --> 00:06:39,510 or we do some validation or whatever it might be 150 00:06:39,510 --> 00:06:43,170 we then have the option to dispatch an action 151 00:06:43,170 --> 00:06:46,350 and dispatching that action will cause our reducers to rerun 152 00:06:46,350 --> 00:06:48,723 and update the state inside of our application. 153 00:06:49,920 --> 00:06:54,716 Okay, so that is a very brief overview on reduxThunk. 154 00:06:54,716 --> 00:06:57,300 Now I'm gonna delete the contents of that function 155 00:06:57,300 --> 00:06:59,700 and I'm gonna make one small change here. 156 00:06:59,700 --> 00:07:02,670 So if you already went through that middleware section, 157 00:07:02,670 --> 00:07:04,110 you saw that we first wrote 158 00:07:04,110 --> 00:07:07,030 out three functions that return each other in a row 159 00:07:08,587 --> 00:07:10,050 and then we very quickly refactor that to be a series 160 00:07:10,050 --> 00:07:13,830 of arrow functions that automatically return each other. 161 00:07:13,830 --> 00:07:15,330 So when we make use of reduxThunk, 162 00:07:15,330 --> 00:07:17,820 we normally do the exact same thing. 163 00:07:17,820 --> 00:07:19,770 So rather than writing out a long form 164 00:07:19,770 --> 00:07:22,110 function keyword like this right here, 165 00:07:22,110 --> 00:07:25,680 I'm going to instead replace it with an arrow function. 166 00:07:25,680 --> 00:07:27,865 So I'll remove the function keyword 167 00:07:27,865 --> 00:07:30,330 and on the other side of the argument list 168 00:07:30,330 --> 00:07:33,093 I'll add in my object, excuse me, my arrow. 169 00:07:34,770 --> 00:07:39,060 Now our action creator is returning a single value 170 00:07:39,060 --> 00:07:40,650 or in other words there is a single 171 00:07:40,650 --> 00:07:43,170 JavaScript expression right here. 172 00:07:43,170 --> 00:07:47,040 So rather than writing out the long form curly braces 173 00:07:47,040 --> 00:07:48,600 and the return keyword right here, 174 00:07:48,600 --> 00:07:51,460 we can optionally omit that return keyword 175 00:07:52,950 --> 00:07:54,420 and the curly braces. 176 00:07:54,420 --> 00:07:59,040 So the outer curly braces right there, and this one up here. 177 00:07:59,040 --> 00:08:01,320 So this is 100% equal to the code we were 178 00:08:01,320 --> 00:08:02,823 just looking at a moment ago. 179 00:08:03,750 --> 00:08:05,400 If we want to, we could do a little bit 180 00:08:05,400 --> 00:08:06,930 of reformatting here. 181 00:08:06,930 --> 00:08:10,380 We can pull the declaration of this arrow function 182 00:08:10,380 --> 00:08:12,783 onto the line right above it like so. 183 00:08:13,830 --> 00:08:15,390 And then we can also optionally, 184 00:08:15,390 --> 00:08:17,490 because we have one argument listed right here, 185 00:08:17,490 --> 00:08:19,383 we can remove those parentheses. 186 00:08:21,210 --> 00:08:24,240 I'm then going to dedent that closing curly brace 187 00:08:24,240 --> 00:08:26,610 and put on a comma as well. 188 00:08:26,610 --> 00:08:28,470 Okay, so what we see on this screen right now 189 00:08:28,470 --> 00:08:31,080 is 100% equivalent to what we had just 190 00:08:31,080 --> 00:08:35,010 a moment ago when we were returning that keyword function. 191 00:08:35,010 --> 00:08:36,900 This right here is how you're going to usually 192 00:08:36,900 --> 00:08:40,020 see reduxThunk action creators defined. 193 00:08:40,020 --> 00:08:41,710 You're gonna have the export const, 194 00:08:41,710 --> 00:08:44,310 the name of the action creator itself, 195 00:08:44,310 --> 00:08:46,920 and then we're going to have one arrow function 196 00:08:46,920 --> 00:08:49,440 that returns another arrow function. 197 00:08:49,440 --> 00:08:52,020 And so all the logic around our action creator, 198 00:08:52,020 --> 00:08:53,550 like making our request, 199 00:08:53,550 --> 00:08:55,440 trying to sign up with the email, password, 200 00:08:55,440 --> 00:08:58,020 and then eventually calling dispatch with our action 201 00:08:58,020 --> 00:09:01,153 will occur inside the function body right here. 202 00:09:01,153 --> 00:09:02,700 Okay, so that's a lot 203 00:09:02,700 --> 00:09:05,430 on reduxThunk so let's take a quick pause right here. 204 00:09:05,430 --> 00:09:06,840 When we come back in the next section 205 00:09:06,840 --> 00:09:08,314 we're going to make use of Axios 206 00:09:08,314 --> 00:09:11,490 to take our email and our password 207 00:09:11,490 --> 00:09:14,700 and attempt to post them over to our backend API 208 00:09:14,700 --> 00:09:16,440 to sign up for a new account. 209 00:09:16,440 --> 00:09:18,000 So let's take a quick pause right here 210 00:09:18,000 --> 00:09:19,950 and we'll continue in the next section.