1 00:00:00,710 --> 00:00:03,190 Unless video we fix up our posts reducer. 2 00:00:03,200 --> 00:00:08,780 So now any time that we make a request over to that API we should be getting back in action with our 3 00:00:08,780 --> 00:00:14,310 Paller properties showing up inside the reducer that reduce search should be returning the list of posts. 4 00:00:14,360 --> 00:00:19,850 So our redux state object is now going to contain that list of blog posts from the API as soon as that 5 00:00:19,850 --> 00:00:24,480 happens our entire read re-act application should be rendered. 6 00:00:24,530 --> 00:00:29,340 It's not the last thing we do is open up that component of post list. 7 00:00:29,390 --> 00:00:33,770 It is right here and we need to make sure that we get that list of posts inside this component. 8 00:00:34,610 --> 00:00:39,380 Remember anytime we want to get some data from the redux side of our application into the Riak side 9 00:00:39,530 --> 00:00:43,910 we're always going to define the map state to prop's function and pass it off to you connect. 10 00:00:43,910 --> 00:00:45,100 Down here at the bottom. 11 00:00:45,560 --> 00:00:52,030 So underneath my component I'm going to define map state to prop's. 12 00:00:52,130 --> 00:00:56,760 This is going to be called with our entire state object out at the redux store. 13 00:00:56,900 --> 00:01:02,900 If you open up your reducers index file you'll recall that we assigned our reducer to this post key 14 00:01:03,110 --> 00:01:04,990 inside of our combined reducers call. 15 00:01:05,270 --> 00:01:10,700 So that means that our state object right here is going to have a property called posts and that property 16 00:01:10,700 --> 00:01:14,140 is going to hold all the data that are douceur has returned. 17 00:01:14,570 --> 00:01:19,310 So inside a map state the props are going to return an object with posts and it's gonna have the value 18 00:01:19,310 --> 00:01:20,730 of status posts 19 00:01:23,790 --> 00:01:28,510 and then going to take map state to props and hand it off as the first argument to the connect function. 20 00:01:31,660 --> 00:01:38,390 All right so now every single time that our reducers run map state to prop's is going to be called again. 21 00:01:38,530 --> 00:01:44,080 We're going to return a new object with property posts and that object is going to show up as the prop's 22 00:01:44,170 --> 00:01:46,680 object inside of our component. 23 00:01:46,690 --> 00:01:49,330 So now just to test to make sure everything is working OK. 24 00:01:49,420 --> 00:01:56,520 I'm going to add a console log to my render method and I'm going to cancel log out this prop's posts. 25 00:01:56,530 --> 00:02:01,090 Now one thing I ought to mention very quickly before we test this we technically have one little air 26 00:02:01,120 --> 00:02:06,230 inside of our code present that air that we have is not going to result in any error message. 27 00:02:06,250 --> 00:02:11,770 I left this error this error in or little mistake and because I want you to see exactly what happens 28 00:02:11,770 --> 00:02:12,830 when this error is in. 29 00:02:12,850 --> 00:02:15,410 I really expect this is going to be an error that you're going to make. 30 00:02:15,490 --> 00:02:19,980 Unfortunately when you start working on your own project so I just want you to see this air firsthand. 31 00:02:21,320 --> 00:02:21,560 OK. 32 00:02:21,570 --> 00:02:25,710 So we're going to save this and we'll flip back over to our application and we'll see that inside of 33 00:02:25,710 --> 00:02:26,280 our council. 34 00:02:26,280 --> 00:02:28,940 We have two council statements here now. 35 00:02:28,950 --> 00:02:32,890 First off why do we have to cancel logs. 36 00:02:32,910 --> 00:02:38,330 The reason we have two council locks is that when our application is first loaded up inside the browser. 37 00:02:39,030 --> 00:02:45,150 All of our producers run one initial time so the instant our application loads up inside the browser 38 00:02:45,300 --> 00:02:51,630 are reduced to right here runs it's going to run with an action of some initialization type it's going 39 00:02:51,630 --> 00:02:56,200 to have some random type inside of that action object whatever type it is. 40 00:02:56,220 --> 00:02:59,590 It's probably not going to match the case that we have right here of fetch posts. 41 00:02:59,730 --> 00:03:04,350 So we're going to return our default state value of an empty array. 42 00:03:04,410 --> 00:03:09,930 So when our application first boots up we're going to have a state object that has a post property and 43 00:03:09,970 --> 00:03:12,240 that post property is going to contain this empty array. 44 00:03:13,770 --> 00:03:18,690 After all of our producers run our application the Riak side of application is going to be rendered 45 00:03:18,750 --> 00:03:20,550 one time on the screen. 46 00:03:20,550 --> 00:03:26,610 So the post list component is going to be displayed on the screen one time during that initial one time. 47 00:03:26,670 --> 00:03:30,510 We're going to have our render method called and that's going to invoke the console log right here. 48 00:03:30,540 --> 00:03:36,450 And so we see a single console log with this Propst outposts that is this empty array that you see right 49 00:03:36,450 --> 00:03:36,770 here. 50 00:03:36,780 --> 00:03:41,010 So that is the initial first time our application is rendered onto the screen. 51 00:03:41,740 --> 00:03:46,170 Now immediately after the postals component shows up on the screen our component did mount lifecycle 52 00:03:46,300 --> 00:03:51,190 method will be called and then we go through that entire process of running off to that API and fetching 53 00:03:51,190 --> 00:03:58,540 some data after we get some back some data and we dispatch a action to reduce her or reduce or sees 54 00:03:58,540 --> 00:04:04,540 that the action has a type of post it returns whatever value is inside of that action at Paller property 55 00:04:05,140 --> 00:04:09,390 redux sees that we have not returned the same object in memory. 56 00:04:09,390 --> 00:04:11,830 We have not returned that same array. 57 00:04:11,920 --> 00:04:15,950 The second time we do Saran Instead we return this brand new value. 58 00:04:15,970 --> 00:04:22,390 This action not payload whatever it is because that is a totally new value redux assumes that it has 59 00:04:22,390 --> 00:04:28,430 some new data inside of our application and redux essentially tells react to revenger itself. 60 00:04:28,480 --> 00:04:33,700 With this new data and so our post last component is going to be rendered to the screen a second time 61 00:04:34,050 --> 00:04:37,130 map states prop's is going to be called a second time. 62 00:04:37,240 --> 00:04:43,870 We're not going to get the new value of states posts and then that new prop's property or prop's post 63 00:04:43,960 --> 00:04:49,330 is going to show up inside of our component the render method gets called again and we see that console 64 00:04:49,330 --> 00:04:52,990 log a second time appear. 65 00:04:53,070 --> 00:04:56,470 OK so that's a long winded explanation of why we have to console. 66 00:04:56,630 --> 00:04:58,370 And the first console log is an array. 67 00:04:58,390 --> 00:04:59,890 Which is exactly what we want. 68 00:04:59,890 --> 00:05:01,880 Because that is our default state value. 69 00:05:02,080 --> 00:05:06,380 But then the second console log this is where that little air I mentioned comes into play. 70 00:05:06,730 --> 00:05:12,820 So you'll notice that the console like here for this Propst up posts is the entire response object that 71 00:05:12,820 --> 00:05:16,270 we got back from the API or through Acciona essentially. 72 00:05:16,380 --> 00:05:21,940 And so this object has properties like config and headers and request we don't care about any of those 73 00:05:21,940 --> 00:05:24,020 properties whatsoever. 74 00:05:24,040 --> 00:05:28,510 The only thing that we care about in that response is the data right here. 75 00:05:28,540 --> 00:05:31,840 That is the list of blog posts that we are trying to show on the screen. 76 00:05:32,530 --> 00:05:36,460 And so the little air that we have inside of our code right now is essentially just the fact that we 77 00:05:36,460 --> 00:05:42,340 are dispatching the entire response object from our action creator when in fact we should probably only 78 00:05:42,340 --> 00:05:45,190 be dispatching this data array instead. 79 00:05:46,410 --> 00:05:52,530 So essentially back inside of my actions file here's where we dispatch our action. 80 00:05:52,530 --> 00:05:55,620 And on our Paillard property we have that entire response. 81 00:05:55,740 --> 00:05:57,770 So we don't care about the entire response. 82 00:05:57,870 --> 00:06:03,060 All you and I really care about and the only thing we really want to be picked up by our reducer is 83 00:06:03,060 --> 00:06:04,860 the data property on there. 84 00:06:04,920 --> 00:06:11,710 So I get to make sure I put response data like so so now that I've got response data that means that 85 00:06:11,710 --> 00:06:16,770 when we get that second console log we should see the array of posts that are now showing up as props 86 00:06:16,810 --> 00:06:19,020 inside the post list component. 87 00:06:19,060 --> 00:06:24,070 So if we flip back over after saving we'll see the first console log of empty array and we'll see second 88 00:06:24,070 --> 00:06:27,630 counts alog with our list of posts inside of it. 89 00:06:27,760 --> 00:06:28,610 Perfect. 90 00:06:28,970 --> 00:06:29,240 OK. 91 00:06:29,260 --> 00:06:34,750 So now that we've got the list of posts list of posts here we can now take a quick pause and when we 92 00:06:34,750 --> 00:06:38,830 come back we're going to add some more logic to our post list component and make sure that we render 93 00:06:38,830 --> 00:06:41,860 out that list of posts as a list on the screen. 94 00:06:42,010 --> 00:06:43,830 So quick break and I'll see you in just a minute.