1 00:00:01,350 --> 00:00:06,480 In the last section we discuss the difference between a container and a component at great length. 2 00:00:06,570 --> 00:00:12,660 And we decided to promote our book list to be a container instead of just a component remember react 3 00:00:12,660 --> 00:00:16,030 and redox are not at all intrinsically connected. 4 00:00:16,050 --> 00:00:21,630 They're totally separate projects to form a connection between redox our application state that holds 5 00:00:21,660 --> 00:00:28,020 all of our data and our actual components we need to use a separate library called re-act redux to forge 6 00:00:28,020 --> 00:00:29,070 a connection there. 7 00:00:29,280 --> 00:00:36,140 Whenever we forge a connection between a component and redux it turns that component into a container 8 00:00:36,210 --> 00:00:39,470 or a smart component depending on what terminology you want to use. 9 00:00:39,840 --> 00:00:44,670 So we created our bookless component here but we're not making use of it yet inside of our application 10 00:00:44,670 --> 00:00:45,280 at all. 11 00:00:45,450 --> 00:00:50,040 Let's flip over to abduct G-S and make sure that it's just being rendered inside of our application 12 00:00:50,050 --> 00:00:50,500 . 13 00:00:50,970 --> 00:00:51,810 So inside of. 14 00:00:52,030 --> 00:00:59,470 Yes we'll import book lists from where I need to go. 15 00:00:59,490 --> 00:01:04,260 Right now we're inside of the components directories so we're going to go up to source them into containers 16 00:01:04,320 --> 00:01:05,800 and then we'll get a booklist. 17 00:01:06,060 --> 00:01:14,310 So we'll go up then into containers and then we'll get booklist like so and then we'll just go ahead 18 00:01:14,310 --> 00:01:21,200 and replace the current div with our booklist and safe. 19 00:01:21,240 --> 00:01:21,840 Looks good. 20 00:01:21,990 --> 00:01:23,210 You know actually before I forget. 21 00:01:23,220 --> 00:01:27,060 Let's go ahead and wrap this in a div as well because we are going to have other components in here 22 00:01:27,080 --> 00:01:27,660 . 23 00:01:28,180 --> 00:01:28,490 OK. 24 00:01:28,500 --> 00:01:30,390 So we got a div inside of it. 25 00:01:30,450 --> 00:01:32,750 Booklist nice and simple. 26 00:01:33,520 --> 00:01:34,050 OK. 27 00:01:34,080 --> 00:01:37,090 So our booklist is being run inside the app. 28 00:01:37,230 --> 00:01:43,680 Now we need to make sure that booklist actually has a connection from redux to get state into this component 29 00:01:43,680 --> 00:01:44,430 right here. 30 00:01:44,490 --> 00:01:51,030 So remember the end goal is our application application state has a book's property the list of books 31 00:01:51,450 --> 00:01:59,250 we want to get that list of books to show up inside of our component here inside of our container so 32 00:01:59,340 --> 00:02:00,560 to forge that connection. 33 00:02:00,600 --> 00:02:05,240 As I mentioned earlier we're going to use library re-act redux. 34 00:02:05,280 --> 00:02:08,110 So we do need to import it into this directory right here. 35 00:02:08,250 --> 00:02:15,780 So at the top we'll write import from re-act redux and we're going to pull just a single property off 36 00:02:15,780 --> 00:02:16,190 of it. 37 00:02:16,230 --> 00:02:18,180 So we use our curly braces. 38 00:02:18,330 --> 00:02:23,040 Remember if we write just a word we import the entire object from that file. 39 00:02:23,220 --> 00:02:27,400 But if we use our curly braces we pull off just a single property. 40 00:02:27,720 --> 00:02:31,740 So we're going to plot a single property here called Canet. 41 00:02:31,740 --> 00:02:35,940 Note the lowercase see no capitals here. 42 00:02:36,120 --> 00:02:37,680 So we got this connect function. 43 00:02:37,710 --> 00:02:38,450 It is a function. 44 00:02:38,460 --> 00:02:40,380 Let's go ahead to make use of it. 45 00:02:40,500 --> 00:02:43,950 We're not going to export this class any more as the default. 46 00:02:44,220 --> 00:02:45,010 Before we forget. 47 00:02:45,030 --> 00:02:46,750 Let's go ahead and delete it. 48 00:02:46,750 --> 00:02:52,140 So now we've just got class booklist extends component now at the bottom. 49 00:02:52,230 --> 00:02:56,070 Here's where things are going to start getting really interesting. 50 00:02:56,070 --> 00:03:04,290 We're going to define a function here called Map state to prop's this function is going to have one 51 00:03:04,350 --> 00:03:07,710 argument which is state. 52 00:03:08,490 --> 00:03:10,710 So the name of the function here is actually really telling. 53 00:03:10,710 --> 00:03:15,210 It's very descriptive it's Believe or not telling us exactly what's happening here. 54 00:03:15,240 --> 00:03:20,240 The purpose of this function is to take our application state as an argument. 55 00:03:20,240 --> 00:03:25,540 Remember our state contains the array of books and the active book. 56 00:03:25,770 --> 00:03:29,880 So it's going to take her application state and whatever gets returned from here 57 00:03:32,430 --> 00:03:41,890 will show up as props inside of book list. 58 00:03:43,770 --> 00:03:50,670 So usually we end up returning an object from this whatever is contained within the subject is going 59 00:03:50,670 --> 00:03:55,290 to be set equal to this dot props of our component. 60 00:03:55,290 --> 00:04:03,410 So if we return from here like you know SDF is one to three then our component here we said Count log 61 00:04:03,850 --> 00:04:05,220 this dot prob start. 62 00:04:05,230 --> 00:04:06,000 SDF 63 00:04:08,580 --> 00:04:13,300 we would end up with 1 2 3 like so. 64 00:04:14,520 --> 00:04:18,180 So again this function is very well-named mapped state to process. 65 00:04:18,180 --> 00:04:24,850 It takes in the application state the entire thing all of it and whatever we return from it this function 66 00:04:25,140 --> 00:04:29,410 is what is going to show up as props inside of our container here. 67 00:04:29,460 --> 00:04:34,710 So I hope it starts to make a little more sense why we say that our containers are that link between 68 00:04:34,800 --> 00:04:37,200 redox and react. 69 00:04:37,260 --> 00:04:41,740 It's all done via the use of this map state to prop's function. 70 00:04:42,030 --> 00:04:44,880 So we're not going to want to return this you know garbage string right here. 71 00:04:44,880 --> 00:04:46,050 SDF one two three. 72 00:04:46,080 --> 00:04:48,770 So let's go ahead and delete that instead. 73 00:04:48,810 --> 00:04:55,740 Well we definitely want is a property called books that's going to be the array of books like you know 74 00:04:55,740 --> 00:04:57,390 our list of books. 75 00:04:57,480 --> 00:05:02,380 So we want the property to be called books because you know we're making reference to this stuff props 76 00:05:02,380 --> 00:05:09,730 up books appear here and we want the value to be the list of books off of our state. 77 00:05:09,730 --> 00:05:16,500 Remember our state has two properties right now books an active book. 78 00:05:16,650 --> 00:05:18,460 Books is the array of books. 79 00:05:18,570 --> 00:05:20,740 And that's exactly what we want. 80 00:05:20,760 --> 00:05:24,160 So here will say state DOT books. 81 00:05:24,390 --> 00:05:25,390 That's it. 82 00:05:25,410 --> 00:05:32,280 This is the connection between redux and our component here our container Well actually I take that 83 00:05:32,280 --> 00:05:32,760 back. 84 00:05:32,910 --> 00:05:33,590 We're almost there. 85 00:05:33,630 --> 00:05:35,210 Oh is there one more step. 86 00:05:35,340 --> 00:05:41,700 At the very bottom we need to actually make use of that connect function that we imported up top the 87 00:05:41,700 --> 00:05:48,000 connect function is what actually says OK you know take this component take this map state to props 88 00:05:48,210 --> 00:05:52,620 and return a container and that's what we want to export from this file as well. 89 00:05:52,620 --> 00:05:58,740 By the way so that's why we deleted the export default above whenever we make a container file. 90 00:05:58,770 --> 00:06:00,370 We don't want to export. 91 00:06:00,410 --> 00:06:04,130 You know the bookless plane component that nobody cares about. 92 00:06:04,200 --> 00:06:06,380 We want to export the container. 93 00:06:06,750 --> 00:06:08,890 So we'll write connect. 94 00:06:09,180 --> 00:06:13,860 Map state to props and then we're getting close friends. 95 00:06:13,860 --> 00:06:15,860 So it's like two separate calls here. 96 00:06:16,140 --> 00:06:24,290 And the second thing is then you open up another set of friends and we're going to pass a booklist. 97 00:06:25,450 --> 00:06:25,930 OK. 98 00:06:26,130 --> 00:06:28,640 So confusing stuff here. 99 00:06:29,070 --> 00:06:30,890 Let's go through it again. 100 00:06:32,550 --> 00:06:39,450 At the very top we imported our connect function from re-act redux reactor redux is the glue between 101 00:06:39,450 --> 00:06:41,370 react and redux. 102 00:06:41,370 --> 00:06:44,130 There again they are completely separate libraries. 103 00:06:44,130 --> 00:06:45,870 They are not developed in tandem. 104 00:06:45,930 --> 00:06:46,870 Totally different libraries. 105 00:06:46,890 --> 00:06:47,930 No connection. 106 00:06:47,970 --> 00:06:54,360 It's only through this re-act redux that we get any kind of merging between the two of them specifically 107 00:06:55,040 --> 00:06:59,580 reata redux makes this connect function available. 108 00:06:59,610 --> 00:07:06,780 Connect takes a function and a component and produces a container. 109 00:07:06,780 --> 00:07:12,330 The container is a component that is aware of the state that's in with with it that is aware of the 110 00:07:12,330 --> 00:07:19,570 state that is contained by redirects the map state to prop's function is especially key here. 111 00:07:19,590 --> 00:07:29,040 The first argument is the state and it returns an object whatever object is returned will be available 112 00:07:29,040 --> 00:07:31,680 to our component as this props. 113 00:07:31,680 --> 00:07:37,470 So again this is the glue for a third time now just to hammer home this function right here is really 114 00:07:37,470 --> 00:07:39,660 the glue between react and redux. 115 00:07:39,690 --> 00:07:44,460 Very important function right here in our case. 116 00:07:44,460 --> 00:07:49,800 We want to have access to this prop stock books with our component. 117 00:07:49,800 --> 00:07:57,000 So we are returning object with a key of books and a value of state DOT books because our books reducer 118 00:07:57,060 --> 00:07:58,920 is returning the books propertied right here. 119 00:07:58,920 --> 00:08:03,950 You know our array of books the array of objects. 120 00:08:04,080 --> 00:08:06,260 So that's a review of what we just did. 121 00:08:06,300 --> 00:08:10,930 I just want to throw two more notes out here that are very important. 122 00:08:11,040 --> 00:08:15,270 The first of which is that whenever our application state changes. 123 00:08:15,300 --> 00:08:20,180 So you know let's say we are loading a list of books from some remote server. 124 00:08:20,370 --> 00:08:25,360 And that takes some time or a user clicks on something and that changes the list of books or you know 125 00:08:25,410 --> 00:08:26,590 whatever reason. 126 00:08:26,970 --> 00:08:34,200 If our state ever changes this container will instantly render with the new list of books. 127 00:08:34,410 --> 00:08:34,790 OK. 128 00:08:34,830 --> 00:08:37,410 So that's a very important fact number one. 129 00:08:37,530 --> 00:08:43,320 And we're going to take use of that advantage that all over the place all the time whenever our application 130 00:08:43,320 --> 00:08:52,080 state changes our component our container booklist will automatically remember the second important 131 00:08:52,610 --> 00:09:01,710 fact here by using connect to create a container is that whenever the application state changes the 132 00:09:02,100 --> 00:09:07,080 object in the state function will be assigned as props to the component. 133 00:09:07,080 --> 00:09:11,640 And we've discussed that you know several times now just to reiterate it's going to end up as this stop 134 00:09:11,640 --> 00:09:13,530 Propst up books. 135 00:09:13,620 --> 00:09:16,390 OK so we've got a container here. 136 00:09:16,410 --> 00:09:18,060 It's being rendered inside of app. 137 00:09:18,060 --> 00:09:19,910 Let's go ahead and save this. 138 00:09:20,130 --> 00:09:29,220 Flip over to the browser refresh and oh my gosh it actually worked totally in shock over here. 139 00:09:29,220 --> 00:09:30,640 Not really. 140 00:09:30,750 --> 00:09:32,740 We got lots of books. 141 00:09:33,450 --> 00:09:35,560 So pretty crazy. 142 00:09:35,700 --> 00:09:36,600 Crazy crazy stuff. 143 00:09:36,600 --> 00:09:37,290 I know. 144 00:09:37,290 --> 00:09:43,890 This is if you're getting this right off the bat you have my deep admiration. 145 00:09:43,890 --> 00:09:46,610 You are one intelligent person over there. 146 00:09:46,620 --> 00:09:50,400 I find this to be you know first time I went through this pretty darn confusing. 147 00:09:50,400 --> 00:09:54,230 If you still feel and confused please do not sweat it. 148 00:09:54,270 --> 00:09:56,630 We're going to continue to go over these topics. 149 00:09:56,790 --> 00:10:01,260 You know just to reiterate them again and again and again just to make it clear you know what the heck 150 00:10:01,260 --> 00:10:06,350 state is what this function is what connect is in all this different stuff when it container is all 151 00:10:06,360 --> 00:10:10,230 it's you know all the all the terminology I have been using over time now we're going to continue to 152 00:10:10,230 --> 00:10:12,470 use that as we go through these examples. 153 00:10:12,480 --> 00:10:17,100 So again if it is confusing just hang on I think it's going to get a little bit more clear over time 154 00:10:17,100 --> 00:10:17,840 . 155 00:10:18,420 --> 00:10:22,410 If you're at a point we're thinking yourself OK I'm just totally lost no idea what's going on. 156 00:10:22,410 --> 00:10:24,840 Please please please feel free to drop me an email. 157 00:10:24,840 --> 00:10:30,530 I would love to hear your feedback get a better idea of how to explain these topics to people you know 158 00:10:30,540 --> 00:10:35,370 and I'd love to clarify a topic for you as well so do drop me an email if this is starting to look really 159 00:10:35,370 --> 00:10:36,360 really weird. 160 00:10:36,750 --> 00:10:37,210 OK. 161 00:10:37,260 --> 00:10:39,610 So we've hooked up our first container. 162 00:10:39,690 --> 00:10:41,100 We've got our first reducer. 163 00:10:41,130 --> 00:10:42,300 This is starting to look pretty good. 164 00:10:42,300 --> 00:10:43,600 We're starting to make progress. 165 00:10:43,740 --> 00:10:45,940 Let's go ahead and continue in the next section