1 00:00:00,870 --> 00:00:06,450 In the last section we added the actor a book reducer which produced a new piece of application state 2 00:00:06,510 --> 00:00:12,030 whenever the book selected action was triggered in this section and we're going to start to flesh out 3 00:00:12,030 --> 00:00:19,680 the book detail view which will render whenever there is a selected book before we make this book detail 4 00:00:19,740 --> 00:00:23,540 we need to decide whether or not we're making a component or a container. 5 00:00:23,640 --> 00:00:28,200 Remember we make containers and we want to have a component that can touch the redux state directly 6 00:00:28,200 --> 00:00:29,330 . 7 00:00:29,340 --> 00:00:32,490 Now we know what our book is and we know when it changes. 8 00:00:32,520 --> 00:00:35,960 So it really makes sense that this book detail should be a container. 9 00:00:35,970 --> 00:00:36,790 Right. 10 00:00:36,990 --> 00:00:41,120 Again our app doesn't really care about the active book. 11 00:00:41,270 --> 00:00:47,270 The purpose of app is to render the book list and our soon to be created book detail only the book detail 12 00:00:47,280 --> 00:00:50,120 component really cares about what the active book is. 13 00:00:50,310 --> 00:00:55,040 Therefore we're going to make the active book component a container. 14 00:00:55,830 --> 00:01:03,660 So let's go ahead and get started in our continuous folder then go ahead and create a new file book 15 00:01:04,440 --> 00:01:12,030 detail that Jesus and inside of here we're going to go ahead and just throw down a little bit of our 16 00:01:12,030 --> 00:01:13,940 boilerplate in here for making new component. 17 00:01:14,130 --> 00:01:26,910 So we'll say and poor reacts and component at the top from react and then we will create our class book 18 00:01:27,150 --> 00:01:34,560 detail and that's going to extend component will make our render method. 19 00:01:34,860 --> 00:01:42,420 And from here right now we're just going to return some just a div that just says book detail. 20 00:01:44,010 --> 00:01:48,240 Nice and easy going to say this. 21 00:01:48,300 --> 00:01:52,800 And then we're going to flip back over to abduct J us and we're going to make sure that Archie gets 22 00:01:52,800 --> 00:01:54,900 rendered within our application. 23 00:01:55,020 --> 00:01:58,910 So the top here will import our book detail right underneath the book list. 24 00:01:58,950 --> 00:02:11,080 So in poor book detail from up into containers and then book detail. 25 00:02:11,520 --> 00:02:13,950 Yup looks good. 26 00:02:13,950 --> 00:02:16,670 And then in the render method we'll add the book detail component 27 00:02:19,690 --> 00:02:21,420 like so. 28 00:02:22,170 --> 00:02:23,390 OK. 29 00:02:24,030 --> 00:02:32,790 So let's flip back over to our browser refresh and just verify that our component is showing up here 30 00:02:32,790 --> 00:02:32,970 . 31 00:02:33,000 --> 00:02:33,770 Very good. 32 00:02:34,020 --> 00:02:36,750 If you don't have any tech showing up here for a book detail. 33 00:02:36,910 --> 00:02:41,660 Be sure and check your chrome console for any possible errors or perhaps your terminal. 34 00:02:41,670 --> 00:02:43,070 You know you never know. 35 00:02:43,260 --> 00:02:44,990 Typos come up all the time. 36 00:02:45,630 --> 00:02:45,990 OK. 37 00:02:45,990 --> 00:02:50,850 So we've got our book detail wired up to be displayed by the app component. 38 00:02:51,020 --> 00:02:55,520 We need to also make sure that we hook up the book detail to the redux store. 39 00:02:55,680 --> 00:02:59,150 So it gets told about changes to the active piece of state. 40 00:02:59,370 --> 00:03:01,310 So let's do that next. 41 00:03:01,420 --> 00:03:06,360 And the pattern for this is going to be the exact same as what we did in booklist will import the Kinect 42 00:03:06,360 --> 00:03:12,960 helper and connect our state our application state to the props of this container right here. 43 00:03:13,110 --> 00:03:19,080 And remember we do that by defining a function called Map state to process and then we connect map state 44 00:03:19,080 --> 00:03:21,840 to prop's with book detail. 45 00:03:21,870 --> 00:03:27,840 It's I know you know again that's something that's a little bit esoteric but it's a very reproducible 46 00:03:29,660 --> 00:03:30,480 line of steps. 47 00:03:30,480 --> 00:03:34,640 You know every time they want to create a container it's really the same exact number of steps. 48 00:03:34,860 --> 00:03:37,290 So let's get to it at the top. 49 00:03:37,320 --> 00:03:47,850 We'll import our connect function from re-act redux and then down here we'll go ahead and define our 50 00:03:48,240 --> 00:03:59,290 helper function map state to prop's this has the argument of the application state. 51 00:03:59,850 --> 00:04:05,100 And so we returned from here member this object that we return is going to show up as props inside of 52 00:04:05,100 --> 00:04:06,320 our big detail. 53 00:04:06,660 --> 00:04:12,240 So we're going to return from here will say that it's going to have a proper book and that will be state 54 00:04:12,270 --> 00:04:17,510 DOT active book. 55 00:04:17,630 --> 00:04:20,610 We are specifically referencing active book. 56 00:04:20,610 --> 00:04:22,240 Let me pull it up here really quick. 57 00:04:22,470 --> 00:04:29,990 Here we are because our active book reducer is creating the active book Peace of state. 58 00:04:30,100 --> 00:04:36,990 OK so we've got our map state to probably the last step here is to make sure that we export our container 59 00:04:37,010 --> 00:04:37,370 . 60 00:04:37,770 --> 00:04:49,110 So we're going to say export default and then we'll connect map state to props and look detail. 61 00:04:49,350 --> 00:04:55,370 Also do not forget to remove the export default appear that we just added a minute a minute ago. 62 00:04:55,950 --> 00:04:57,800 So we'll take that off. 63 00:04:57,870 --> 00:04:59,250 OK. 64 00:04:59,760 --> 00:05:02,800 So we've now got a connected component in here. 65 00:05:03,000 --> 00:05:05,360 Let's go ahead and continue in the next section