1 00:00:00,720 --> 00:00:04,380 In the last video we finished doing a little bit of initial setup on our application. 2 00:00:04,560 --> 00:00:09,330 So now we're going to do a little bit of a pivot here and we're going to start to focus on how we load 3 00:00:09,330 --> 00:00:15,270 up data into our app a series of steps that I'm about to show you are going to be repeated many times. 4 00:00:15,270 --> 00:00:20,730 Just about every single time that you ever once you load up some data into a redux application from 5 00:00:20,730 --> 00:00:25,450 some outside API almost always it's going to be the exact same flow. 6 00:00:25,710 --> 00:00:30,450 So the first time that we go over this flow I'm going to show you a really big flow diagram right here 7 00:00:30,540 --> 00:00:33,130 to tell you exactly what's going to happen step by step. 8 00:00:33,150 --> 00:00:37,680 But then as we go through this process in the future we'll kind of have a good understanding of what's 9 00:00:37,680 --> 00:00:40,940 going on and we won't have to talk quite so much about how we load up data. 10 00:00:41,060 --> 00:00:41,320 OK. 11 00:00:41,340 --> 00:00:42,210 So let's get to it. 12 00:00:42,210 --> 00:00:45,530 We're going to go through this thing step by step. 13 00:00:45,560 --> 00:00:51,170 So the first thing that happens is we are going to render some component onto the screen such as our 14 00:00:51,290 --> 00:00:56,960 post list component right here or post that component needs to get a list of posts from that Jay sun 15 00:00:56,990 --> 00:00:59,570 API in order to show itself correctly. 16 00:00:59,840 --> 00:01:02,870 So because of that we are going to define a component. 17 00:01:02,870 --> 00:01:06,410 Did mt life cycle method on our component class. 18 00:01:06,440 --> 00:01:08,840 That is why we created a class based component. 19 00:01:08,840 --> 00:01:14,420 We wanted to make sure that we had access to lifecycle methods inside of the component did MT lifecycle 20 00:01:14,420 --> 00:01:17,480 method were going to place an action creator. 21 00:01:17,540 --> 00:01:22,640 So anytime that our post list component initially shows up on the screen that action creator is going 22 00:01:22,640 --> 00:01:27,660 to be automatically called the action creator that you and I are going to put together is going to have 23 00:01:27,660 --> 00:01:34,260 some code inside of it that is going to use X-post to make an API request over to the Jaison API. 24 00:01:35,500 --> 00:01:41,050 After we make that request the API API is going to eventually respond with some amount of data. 25 00:01:41,050 --> 00:01:45,050 In this case its going to be the list of blog posts that we looked at just a moment ago. 26 00:01:45,100 --> 00:01:45,360 Right. 27 00:01:45,370 --> 00:01:46,840 Here's our list of blog post right here. 28 00:01:46,840 --> 00:01:49,480 Everyone has a title and a body property. 29 00:01:51,180 --> 00:01:56,760 Once we get back that data our action creator is then going to do what an action creator is always supposed 30 00:01:56,760 --> 00:02:03,330 to do it's going to return in action and the action object is going to have our fetched data on the 31 00:02:03,330 --> 00:02:05,250 payload property. 32 00:02:05,370 --> 00:02:11,680 So we're going to return our action from an action creator the dispatch method is going to dispatch 33 00:02:11,680 --> 00:02:15,520 that action and send it off to all the different reducers inside of our app. 34 00:02:16,030 --> 00:02:20,680 So then we're going to have some very specially configured reducer that is going to be watching for 35 00:02:20,680 --> 00:02:25,960 an action of that type whatever we give this particular action the type of maybe you'll be something 36 00:02:25,960 --> 00:02:30,220 like we just Fessor posts or you know some descriptive action type like that. 37 00:02:30,640 --> 00:02:35,140 So some reducers going to see the action and it's going to pull off just the data from that payload 38 00:02:35,140 --> 00:02:36,280 property. 39 00:02:36,280 --> 00:02:40,640 Remember any time that our reducers run they're going to return some values. 40 00:02:40,720 --> 00:02:47,020 Those values are going to form up a new state object inside of a redux store and some are reducers run 41 00:02:47,050 --> 00:02:49,050 and produce a new state object. 42 00:02:49,060 --> 00:02:53,710 We're going to take that state and it's going to be sent off to the Riak side of our application. 43 00:02:53,710 --> 00:02:59,020 And so redux and re-act redux essentially are going to cause the re-act side of our apt to be rendered. 44 00:02:59,220 --> 00:03:03,280 But now this time round inside of our state object we're going to have that list of posts. 45 00:03:03,460 --> 00:03:07,540 And so we're going to make sure that we use something like the map state to prop's function that we 46 00:03:07,540 --> 00:03:13,240 had looked at previously to get the list appose out at the global state object and into our post list 47 00:03:13,240 --> 00:03:14,320 component. 48 00:03:14,730 --> 00:03:14,980 OK. 49 00:03:15,010 --> 00:03:20,050 So that's the entire flow with me talking very quickly about each little step inside there. 50 00:03:20,890 --> 00:03:25,330 Now we're going to see this entire flow in action as we start to code it up and you're going to see 51 00:03:25,330 --> 00:03:32,020 the exact same flow occur again and again any time that you are doing some type of API request inside 52 00:03:32,020 --> 00:03:33,880 of a rebox application. 53 00:03:33,880 --> 00:03:38,050 Now before we move on I want to point out a couple of interesting notes around each of these little 54 00:03:38,050 --> 00:03:40,070 steps inside of your. 55 00:03:40,190 --> 00:03:41,510 All right. 56 00:03:41,510 --> 00:03:46,250 So for these first couple of steps remember we had said that we are going to put in action creator into 57 00:03:46,250 --> 00:03:47,590 a component's component. 58 00:03:47,600 --> 00:03:49,450 Did mt life cycle method. 59 00:03:49,580 --> 00:03:52,670 This is an extremely common practice in general. 60 00:03:52,670 --> 00:03:57,320 We're going to make sure that components themselves are responsible for fetching data that they need 61 00:03:57,320 --> 00:04:03,360 to get by calling some action creator usually from a lifecycle method like component did mount. 62 00:04:03,410 --> 00:04:08,390 There are some other places in which we will call an action creator to fetch some data but that involves 63 00:04:08,390 --> 00:04:11,220 some other libraries that we have not yet made use of. 64 00:04:11,330 --> 00:04:16,720 By far the most common place you're going to be initiating a data fetch requests from will be the component 65 00:04:16,730 --> 00:04:19,470 did mt life cycle method now. 66 00:04:19,590 --> 00:04:24,580 Down here we had a couple of steps around our action creator making requests out to that API. 67 00:04:24,600 --> 00:04:29,070 So in general we're going to usually make sure that action creators are responsible for making our API 68 00:04:29,070 --> 00:04:30,060 requests. 69 00:04:30,060 --> 00:04:35,040 Now in some cases we might put together some external class or some type of external service or something 70 00:04:35,040 --> 00:04:38,480 like that that is going to do the actual API request for us. 71 00:04:38,550 --> 00:04:44,610 But in general it's going to be up to the actual creator to initiate the data fetching process. 72 00:04:44,620 --> 00:04:49,720 Now you'll recall that a couple of videos ago we installed a dependency called redux thunk redux thunk 73 00:04:49,720 --> 00:04:52,240 is going to come into play during this step right here. 74 00:04:52,240 --> 00:04:56,920 Essentially when we call an action creator we haven't yet discussed what redux thunk is. 75 00:04:56,920 --> 00:05:02,180 I just wanted you to know where we're going to eventually see exactly what redux thunk is and why we're 76 00:05:02,200 --> 00:05:03,790 using it inside this project. 77 00:05:05,000 --> 00:05:11,390 Nonetheless the one you mention is that whenever we fetch some data and we want to get it into a component 78 00:05:11,450 --> 00:05:17,060 we're always going to make use of that map state to prop's function to get some data out of our store 79 00:05:17,240 --> 00:05:18,980 and get it down into our component. 80 00:05:18,980 --> 00:05:24,140 So the exact same process that we saw previously in the last application when we wanted to get the currently 81 00:05:24,140 --> 00:05:29,810 selected song into a particular component we're always going to use that same approach for getting data 82 00:05:29,810 --> 00:05:32,800 out of our redux store and into a rock component. 83 00:05:32,820 --> 00:05:37,100 We will always make use of that connect function and the map state to prop's function as well. 84 00:05:37,890 --> 00:05:41,880 Okay so now that we've got a better idea of what's going on here let's take a quick pause. 85 00:05:41,880 --> 00:05:46,770 When we come back in the next section we're going to make sure that we wire up that connect function 86 00:05:46,770 --> 00:05:50,850 from re-act redux to our Posterous component and then make sure that we have an action creator that 87 00:05:50,850 --> 00:05:56,190 we can call to go out to that API and eventually get our data in return. 88 00:05:56,190 --> 00:05:58,680 So quick pause right here and we'll continue in the next section.