1 00:00:00,860 --> 00:00:06,630 In the last section we discussed the role that middleware has with redux middleware has the ability 2 00:00:06,630 --> 00:00:13,730 to block modify or just let pass through actions as they are created before they hit or reduce. 3 00:00:14,070 --> 00:00:17,780 So you didn't really think of middleware is as like a gatekeeper of sorts. 4 00:00:17,790 --> 00:00:22,500 We then installed a piece of middleware called redux promise which is going to help us with our Ajax 5 00:00:22,500 --> 00:00:28,440 request and a little bit in this section we're going to work on creating that actual Ajax request and 6 00:00:28,440 --> 00:00:33,660 we're going to temporarily bench the topic of Middle weares and redux promise. 7 00:00:33,660 --> 00:00:37,770 We're going to come back to both of those in a section or two in this section is going to focus on making 8 00:00:37,770 --> 00:00:39,650 the actual request. 9 00:00:40,500 --> 00:00:41,030 OK. 10 00:00:41,250 --> 00:00:43,660 So the actual Ajax request itself. 11 00:00:43,890 --> 00:00:49,480 Remember our application state holds all the data of our application. 12 00:00:49,590 --> 00:00:53,460 And as you might imagine that includes stuff like weather data. 13 00:00:53,460 --> 00:00:58,440 We only change our application state through our reducers and actions. 14 00:00:58,590 --> 00:01:04,710 So as you might imagine to load our weather data you know to actually change our application state and 15 00:01:04,740 --> 00:01:10,620 add that weather data we need to dispatch an action call it you know call an action creator which is 16 00:01:10,620 --> 00:01:14,980 going to be responsible for making that Ajax request. 17 00:01:15,060 --> 00:01:21,950 So I'm inside of index not us in our actions directory here where we're going to create an action creator 18 00:01:22,260 --> 00:01:27,380 that's going to be responsible for making API request to go fetch our weather data. 19 00:01:28,020 --> 00:01:34,860 So as before we're going to create a new function and export it so that it can be required into other 20 00:01:34,860 --> 00:01:36,680 files in our project here. 21 00:01:37,320 --> 00:01:41,250 And we're going to call it fetch whether 22 00:01:45,220 --> 00:01:52,660 member action creators always have to return an action and an action is an object which always always 23 00:01:52,660 --> 00:01:55,480 always has to have a type. 24 00:01:55,480 --> 00:02:01,690 Now the last time we made an action we put a string in here that kind of looks like this wasn't the 25 00:02:01,690 --> 00:02:05,340 same string and now the same words but it was a string. 26 00:02:05,470 --> 00:02:12,190 This time around rather than making this a string we're going to extract this to a separate variable 27 00:02:12,310 --> 00:02:13,210 and export it 28 00:02:17,790 --> 00:02:20,100 and assign it to the constant fetch whether 29 00:02:23,670 --> 00:02:28,800 And instead of using a string to your will use fetch whether the variable. 30 00:02:28,890 --> 00:02:36,560 So all we did was define a variable called fecche whether we assign the string to it fetch whether And 31 00:02:36,560 --> 00:02:38,380 then we exported that variable. 32 00:02:38,510 --> 00:02:43,000 And finally we created an action where the type was such weather. 33 00:02:43,580 --> 00:02:47,360 So you might be asking well you know what's the purpose of this. 34 00:02:47,360 --> 00:02:49,090 Why don't we just make the thing a string. 35 00:02:49,160 --> 00:02:56,600 And the answer is to keep our action types consistent between our action creators and our reducers in 36 00:02:56,600 --> 00:02:57,320 a little bit. 37 00:02:57,320 --> 00:03:00,590 We're going to create a reducer that handles this type right here. 38 00:03:00,650 --> 00:03:01,790 Right. 39 00:03:01,910 --> 00:03:07,580 And it's going to specifically say for action that type and then when have a switch statement and it's 40 00:03:07,580 --> 00:03:10,480 going to be looking for the string that's weather. 41 00:03:10,580 --> 00:03:11,280 Right. 42 00:03:11,600 --> 00:03:18,410 Well imagine for a second that in this file right here I had the string fetch weather and then in the 43 00:03:18,470 --> 00:03:24,890 reducer I had the same thing fetch weather and then someone comes along and they accidentally did that. 44 00:03:24,890 --> 00:03:32,120 You know they actually make some typo that causes the type in here inside of our action crater to not 45 00:03:32,120 --> 00:03:35,290 be identical to the type inside of our reducer. 46 00:03:35,310 --> 00:03:36,590 That's a huge bug right there. 47 00:03:36,590 --> 00:03:40,730 None of our actions would then be recognized by that reducer. 48 00:03:40,730 --> 00:03:47,870 So what we usually do as a convention is make a single variable that holds our actual type and we use 49 00:03:47,870 --> 00:03:55,130 it in here and then later on we're going to import that variable into our reducer as well so that we 50 00:03:55,130 --> 00:03:59,960 don't ever have to be referencing or like you know copy pasting strings between different files. 51 00:03:59,960 --> 00:04:06,740 We just have the single canonical source of action type right here this variable right here. 52 00:04:06,740 --> 00:04:12,020 What that means is I could then later come on through here and do like that or something if I wanted 53 00:04:12,040 --> 00:04:18,560 to write and because my reducer and my action are referencing this variable it doesn't really matter 54 00:04:18,560 --> 00:04:19,880 what the value of the string is. 55 00:04:19,880 --> 00:04:23,630 So long as it's consistent in both locations. 56 00:04:23,650 --> 00:04:26,260 OK so enough on action types here. 57 00:04:26,360 --> 00:04:28,850 Let's get back to making our request. 58 00:04:29,270 --> 00:04:34,330 So we have our action creator that's returning an action with type fecche weather. 59 00:04:34,340 --> 00:04:40,950 So now it's time to actually go ahead and make our API request to make our API request. 60 00:04:40,970 --> 00:04:43,750 We need to put together our request you are. 61 00:04:43,940 --> 00:04:48,590 This is just like if you're familiar with Jay queery And you know get requests. 62 00:04:48,590 --> 00:04:51,270 That's basically what we're going to do here we're going to make a deal. 63 00:04:51,350 --> 00:04:56,230 We're going to make an AJAX get request to it and that's going to return our data for us. 64 00:04:57,050 --> 00:05:03,160 So the really critical part here is making sure that we put together the correct URL to do that. 65 00:05:03,170 --> 00:05:06,680 We're going to reference the documentation a little bit more. 66 00:05:07,070 --> 00:05:12,700 So I'm going to come over here and we'll just use this string right here as kind of a template for us. 67 00:05:12,710 --> 00:05:22,490 So I'm going to copy this URL and come back over to our project and make a new variable Konst route 68 00:05:22,720 --> 00:05:25,880 you are l and I'm going to paste 69 00:05:28,490 --> 00:05:31,840 wrap it in quotes and put a semi colon at the end. 70 00:05:31,970 --> 00:05:36,050 So this is the part of the URL that we really care about it's Scott this kind of you know the route 71 00:05:36,050 --> 00:05:40,020 you are l the domain and the path. 72 00:05:40,370 --> 00:05:42,530 But then it's also got this queery right here. 73 00:05:42,560 --> 00:05:46,940 And the application ID which should be our API key instead. 74 00:05:46,940 --> 00:05:50,090 So we're going to clean up the world just a little bit. 75 00:05:50,120 --> 00:05:57,480 We're going to delete everything from the Q to app ID so just Q equals. 76 00:05:57,930 --> 00:06:03,340 Yours might say in London not Lundell whatever coming to us in an ampersand. 77 00:06:03,560 --> 00:06:08,730 OK so I now have forecast questionmark app ID equals law. 78 00:06:09,020 --> 00:06:13,430 And again we don't really want to use someone else's API keys so I'm going to delete this as well. 79 00:06:13,430 --> 00:06:16,010 So we're then reduced just down to forecast. 80 00:06:16,010 --> 00:06:19,130 Question mark app ID equals. 81 00:06:19,880 --> 00:06:22,100 So we do want to get the API key in here. 82 00:06:22,130 --> 00:06:29,640 One way that we can do that is to say take that string plus API key. 83 00:06:29,690 --> 00:06:35,630 This would definitely work but we can also make use of yes 6 template strings in here to clean up this 84 00:06:35,630 --> 00:06:36,350 code a little bit. 85 00:06:36,350 --> 00:06:42,620 So this is going to be you know again another little bit a piece of yes six syntax template strings. 86 00:06:42,620 --> 00:06:49,490 Just take one string and then a javascript variable and it inserts or injects that javascript variable 87 00:06:49,490 --> 00:06:50,740 into a string. 88 00:06:51,050 --> 00:06:54,350 So we want the API key to be at the very end here. 89 00:06:54,590 --> 00:07:00,590 So I'm going to replace both of my quotes with back ticks. 90 00:07:00,700 --> 00:07:05,290 I remember back ticks are the character that's to the left of the one on your keyboard. 91 00:07:05,480 --> 00:07:11,830 Then I'm going to delete the plus API key and then to inject the javascript variable into this. 92 00:07:11,840 --> 00:07:12,340 All right. 93 00:07:12,340 --> 00:07:17,430 Dollar Sign curly braces and then API key. 94 00:07:18,170 --> 00:07:21,410 So the result here is a year old that looks like forecast. 95 00:07:21,580 --> 00:07:27,540 Questionmark up ID equals and then 6 7 8 blah blah blah blah blah. 96 00:07:28,300 --> 00:07:30,560 You don't have to use template strings if you don't want to. 97 00:07:30,580 --> 00:07:33,370 Know again this is iOS 6 syntax right here. 98 00:07:33,400 --> 00:07:34,570 Totally totally optional. 99 00:07:34,570 --> 00:07:40,230 You can always just write you know the base Eurail plus API key if you want to if you think that's more 100 00:07:40,240 --> 00:07:45,730 clear template strings in general though you know it's cleans up the code a little bit makes things 101 00:07:45,730 --> 00:07:50,500 a little bit more easier read I suppose. 102 00:07:50,710 --> 00:07:53,980 But again totally optional if you don't want to use it. 103 00:07:54,870 --> 00:07:57,240 OK so we've got our root your L. 104 00:07:57,460 --> 00:08:04,650 All he needs to do now is make sure that we get the actual city queery in there. 105 00:08:04,660 --> 00:08:07,150 I remember you know pop open the End Point. 106 00:08:07,150 --> 00:08:10,240 Here again we need to pass in. 107 00:08:10,270 --> 00:08:13,670 Q equals and then the city name and the country code in here. 108 00:08:13,690 --> 00:08:15,940 Separated by a comma. 109 00:08:16,840 --> 00:08:19,930 So we need to get that city from somewhere. 110 00:08:20,170 --> 00:08:25,810 We're going to say that whenever someone calls the fetch weather action they're going to pass along 111 00:08:25,870 --> 00:08:27,570 a city name as well. 112 00:08:27,730 --> 00:08:34,690 So we're going to just say that we should always have a argument in here of city which should be a string 113 00:08:34,750 --> 00:08:39,550 which would be like you know a search term basically like London or San Antonio or New York or what 114 00:08:39,550 --> 00:08:40,650 have you. 115 00:08:40,720 --> 00:08:48,730 So with that we can then craft our final you or else string that includes that search term. 116 00:08:48,820 --> 00:08:53,080 Again we're going to use a query string for this to form up our final u r l. 117 00:08:54,040 --> 00:09:01,810 So we'll make our back ticks will insert the root u r l and then I'm going to flip back over here real 118 00:09:01,810 --> 00:09:02,410 quick. 119 00:09:02,420 --> 00:09:05,730 Remember we have to have two equals. 120 00:09:05,770 --> 00:09:13,560 And then the city name comma city country code so we've got everything up to the app ID. 121 00:09:13,960 --> 00:09:14,650 So Will do. 122 00:09:14,650 --> 00:09:18,550 And for an additional piece of the query string. 123 00:09:18,700 --> 00:09:23,020 Q equals dollar sign city. 124 00:09:23,080 --> 00:09:28,870 So that's we're injecting in the city name here comma and then normally we would put in the country 125 00:09:28,870 --> 00:09:32,320 code in this application we're going to make the country code static. 126 00:09:32,320 --> 00:09:36,640 So it's always going to be just us if you want to have a different country in here. 127 00:09:36,640 --> 00:09:40,930 You know if you're from some other country and you don't want to be just searching for U.S. cities all 128 00:09:40,930 --> 00:09:44,830 day you can certainly place the different country code in here. 129 00:09:44,980 --> 00:09:48,550 You can find that country code within the documentation over here you're going to need to do a little 130 00:09:48,550 --> 00:09:51,760 bit of research to find the appropriate one. 131 00:09:52,370 --> 00:09:53,060 OK. 132 00:09:53,560 --> 00:09:58,490 So finally we've got our URL here should be pretty good. 133 00:09:58,570 --> 00:10:06,430 We've got the route you well we've got our app I.D. and we add on an additional query here of and q 134 00:10:06,760 --> 00:10:08,910 with a city name Khama us. 135 00:10:09,000 --> 00:10:11,100 I like this looking pretty good. 136 00:10:11,860 --> 00:10:13,490 So we've got to request your l. 137 00:10:13,510 --> 00:10:16,970 Last thing we need to do is make the actual request. 138 00:10:17,650 --> 00:10:21,490 So if you again if you're familiar with Jay Querrey you might be expecting to write something like you 139 00:10:21,490 --> 00:10:24,680 know a dollar sign get you r l or something like that. 140 00:10:24,950 --> 00:10:31,300 Well we don't really need a library as fully featured as Jay Querrey for application here. 141 00:10:31,320 --> 00:10:37,620 J.A.G. contains a ton of functionality and all we really need to do is just make it simple Ajax request. 142 00:10:37,690 --> 00:10:43,180 So instead of using a query we're going to use a another library called ASIO's which we're going to 143 00:10:43,180 --> 00:10:45,990 install from the terminal. 144 00:10:46,420 --> 00:10:52,700 So at the terminal we're going to write NPM install dash save x. 145 00:10:52,750 --> 00:10:54,120 It is A-X. 146 00:10:54,160 --> 00:10:56,030 Oh yes. 147 00:10:56,050 --> 00:11:02,190 So Axel's is a library that is solely made for making Ajax requests from the browser. 148 00:11:02,410 --> 00:11:05,390 It works almost identically to Jay query. 149 00:11:05,590 --> 00:11:11,380 As a matter of fact I'm going to hop over to my browser and pull ups and the documentation will look 150 00:11:11,380 --> 00:11:12,990 at an example or two really quick. 151 00:11:19,170 --> 00:11:24,350 And so right here you can see you know here's a get request which is exactly what we need to make use 152 00:11:24,350 --> 00:11:29,060 call ASIO's type get passed in the URL and that returns a promise. 153 00:11:29,120 --> 00:11:35,400 So we can write Daut then and have a function in here that will handle the response for us. 154 00:11:35,420 --> 00:11:36,660 Super straightforward. 155 00:11:37,070 --> 00:11:39,520 If you're not familiar with promises don't sweat it. 156 00:11:39,530 --> 00:11:42,630 We don't actually we're not actually going to work with promises that much here. 157 00:11:42,770 --> 00:11:47,080 As a matter of fact that's actually the purpose of redux promise as you might imagine. 158 00:11:47,210 --> 00:11:55,640 All we really need to do is make make the Ajax request which will do by writing just as Dot get. 159 00:11:55,670 --> 00:11:57,220 So let's do that now. 160 00:11:57,590 --> 00:12:06,950 At the top of our file I'm going to import Axel's from Axel's because we just installed it and then 161 00:12:06,950 --> 00:12:16,270 down in our action creator will say constant requests equals x start get you r l. 162 00:12:16,520 --> 00:12:23,120 So basically take this URL that we crafted with a very particular search city and make a get request 163 00:12:23,120 --> 00:12:24,560 on it. 164 00:12:24,620 --> 00:12:26,550 This will return a promise right here. 165 00:12:26,570 --> 00:12:29,360 I'm just going to call it request. 166 00:12:29,360 --> 00:12:38,630 So last step here we're going to pass that request into our pay into our action here as the payload. 167 00:12:38,670 --> 00:12:44,630 Remember the payload is an optional property that goes along with actions that can contain some additional 168 00:12:44,630 --> 00:12:47,410 data that describes this particular action. 169 00:12:47,420 --> 00:12:50,580 So we got payload is the request. 170 00:12:50,590 --> 00:12:51,030 OK. 171 00:12:51,050 --> 00:12:53,150 So we added a ton of code in here. 172 00:12:53,440 --> 00:12:54,400 Well maybe not a ton. 173 00:12:54,400 --> 00:12:59,510 We've only got about you know 16 lines or so but I feel as though it's pretty complicated so let's do 174 00:12:59,510 --> 00:13:02,890 a quick rundown of it again in the next section.