1 00:00:00,670 --> 00:00:04,830 Unless video we took care of the first three steps here by creating a new action creator and then hooking 2 00:00:04,830 --> 00:00:09,120 it up to our posts lets component so I can mark those in green to indicate that we're complete with 3 00:00:09,120 --> 00:00:09,890 those. 4 00:00:09,990 --> 00:00:13,830 We're not going move on to our next step here which is to make sure that our action creator has some 5 00:00:13,830 --> 00:00:19,290 code inside of it to make an API request over to our API and actually get some data from it. 6 00:00:19,500 --> 00:00:20,570 So let's get to it. 7 00:00:21,550 --> 00:00:26,320 Now back when we were working on some reac projects earlier and said this course we already always created 8 00:00:26,350 --> 00:00:33,280 a separate file and we created a new instance of X-posts inside that file that preconfigured ASIO's 9 00:00:33,430 --> 00:00:38,080 with some base or L and some API key or something similar in every case. 10 00:00:38,170 --> 00:00:42,880 We're going to take the same approach this time around where we pre-configured X-post to make a request 11 00:00:42,940 --> 00:00:46,920 over to specifically this Jason placeholder API. 12 00:00:47,350 --> 00:00:51,100 Now this time around we don't need a API key or anything like that. 13 00:00:51,160 --> 00:00:56,220 So it's not super necessary to pre-configured X-posts or make an instance out of it. 14 00:00:56,320 --> 00:00:57,130 In this case. 15 00:00:57,130 --> 00:01:00,840 But I want to do the same thing this time around just to stay consistent. 16 00:01:00,850 --> 00:01:06,510 All right so back inside of my SIRC directory I'm going to make a new folder called API eyes. 17 00:01:06,750 --> 00:01:13,640 And then inside of there I'll make a new file called Jaison place holder Geass. 18 00:01:13,650 --> 00:01:17,970 Now the reason that we are calling this Jaison placeholder is because that is the name of the service 19 00:01:17,970 --> 00:01:24,970 we are using it is called japes on placeholder so now inside this new file I will import X-posts from 20 00:01:24,970 --> 00:01:32,670 ASIO's and then I will export default ASIO's create and we are going to pass this thing. 21 00:01:32,670 --> 00:01:36,110 A base you are l so that we don't have to specify the base you are. 22 00:01:36,120 --> 00:01:38,260 Every single time that we make a request. 23 00:01:38,470 --> 00:01:45,000 So to get my base or I'll I'll come back over to the documentation page at some placeholder type code 24 00:01:45,030 --> 00:01:49,290 dot com and we'll go down to one of those requests. 25 00:01:49,710 --> 00:01:54,810 So the resources right here I'm going to open up the posts and point and then this right here is going 26 00:01:54,810 --> 00:01:57,340 to be the base or else that we want to use. 27 00:01:57,630 --> 00:02:05,040 So I'm going to copy the URL inside my address bar and then I'll paste it inside of your as a string. 28 00:02:05,040 --> 00:02:07,930 Now remember this is only supposed to have the base your l. 29 00:02:08,010 --> 00:02:12,840 So in this case we don't want to put the slash post on here because we want to specify the end point 30 00:02:12,840 --> 00:02:17,520 that we're trying to access when we actually make the request because in some cases we all want to get 31 00:02:17,640 --> 00:02:19,740 slash posts in some other cases. 32 00:02:19,740 --> 00:02:23,070 We will want to get our list of users with Flash users. 33 00:02:23,250 --> 00:02:27,250 So I'm going to take off the slash users or slash posts at the very end. 34 00:02:28,120 --> 00:02:29,440 I guess that's pretty much it. 35 00:02:29,740 --> 00:02:34,540 So now we're going to flip back over to our actions indexed not just file. 36 00:02:34,680 --> 00:02:47,320 I'm going to import Jaison placeholder from up one directory API is Jaison place holder like so. 37 00:02:47,400 --> 00:02:52,350 So then we can use this pre-configured ASIO's instance to make a request inside of our action creator 38 00:02:52,350 --> 00:02:53,280 itself. 39 00:02:53,670 --> 00:02:58,740 So we're going to use that async await syntax we've seen before very very shortly. 40 00:02:59,090 --> 00:03:02,870 MEMBER We are going to mark this function as async. 41 00:03:03,000 --> 00:03:07,620 And then inside of here I will say a wait and then I will list out the actual request that we want to 42 00:03:07,620 --> 00:03:08,390 make. 43 00:03:08,400 --> 00:03:11,880 So I want to make a request to Jaison placeholder. 44 00:03:11,970 --> 00:03:18,440 I want to make a get type request and I want to access the posts and point like so and then I'm going 45 00:03:18,440 --> 00:03:22,020 to assign the result of all that to response. 46 00:03:22,160 --> 00:03:28,200 And then finally I'm going to take that response object and assign it to the payload property like so. 47 00:03:28,260 --> 00:03:31,960 OK so what you see right here looks like it is the correct thing. 48 00:03:32,190 --> 00:03:32,700 All right. 49 00:03:32,700 --> 00:03:33,950 We have an actual creator. 50 00:03:33,960 --> 00:03:39,880 It makes a request and it's going to return in action object with our data on the payload property. 51 00:03:39,900 --> 00:03:43,200 However this is not correct code. 52 00:03:43,440 --> 00:03:48,100 So this right here this is a bad approach. 53 00:03:48,100 --> 00:03:53,200 Now it's not bad because we're using a bad design or that we wrote code incorrectly or anything like 54 00:03:53,200 --> 00:03:53,710 that. 55 00:03:53,810 --> 00:03:56,790 It is bad because we are breaking the rules of redux. 56 00:03:56,830 --> 00:04:00,590 We are specifically breaking the rules of an action creator. 57 00:04:00,730 --> 00:04:05,230 Now before I tell you exactly what rules we are breaking I want to very quickly show you the error message 58 00:04:05,230 --> 00:04:09,670 that we're going to get if we attempt to run this inside of our browser so I can flip back or it's my 59 00:04:09,670 --> 00:04:15,410 application the page automatically refreshed and it automatically call that action creator we just put 60 00:04:15,410 --> 00:04:16,010 together. 61 00:04:16,140 --> 00:04:20,480 You'll see that we get this error message actions must be plain objects. 62 00:04:20,840 --> 00:04:21,540 OK. 63 00:04:21,590 --> 00:04:25,960 The second part of your message says use custom middleware for async actions. 64 00:04:25,970 --> 00:04:30,920 Now you might recall that a little bit ago when we first installed a couple of dependencies into this 65 00:04:30,920 --> 00:04:36,290 project we had installed redux thunk and I had said that this was a middleware to help us make requests 66 00:04:36,320 --> 00:04:37,990 any redux application. 67 00:04:38,060 --> 00:04:41,680 So we're going to eventually solve this issue by making use of redux thunk. 68 00:04:41,760 --> 00:04:47,600 But before we do there is a lot of stuff that we'd love for you to understand about this action creator 69 00:04:47,660 --> 00:04:50,630 and why it is not working as expected. 70 00:04:50,690 --> 00:04:55,350 This is another one of those messages that you are probably going to see countless number of times. 71 00:04:55,550 --> 00:04:59,660 And if you just understand the reason that we are seeing this message right now it's going to make your 72 00:04:59,660 --> 00:05:02,030 life way easier down the line. 73 00:05:02,250 --> 00:05:03,360 So let's take a pause right here. 74 00:05:03,380 --> 00:05:07,550 When we come back the next section we're going to talk a couple of reasons about why our current code 75 00:05:07,550 --> 00:05:10,700 is not working and it will start to discuss how we're going to fix it. 76 00:05:10,730 --> 00:05:12,650 So quick pause and I'll see you in just a minute.