1

00:00:00,780  -->  00:00:06,630
In the last section we created this booklist component here and we started to discuss the topic of containers

2

00:00:06,630  -->  00:00:07,400
.

3

00:00:07,440  -->  00:00:13,710
Remember a container is just a component that has direct access to the state that's produced by redux

4

00:00:14,440  -->  00:00:20,850
reactant redux are two separate libraries and it's only through this third library called re-act redux

5

00:00:21,300  -->  00:00:27,540
that we can meld the two together and get a component that's actually aware of the state that is contained

6

00:00:27,540  -->  00:00:30,610
within redux.

7

00:00:30,990  -->  00:00:35,180
We kind of made the decision right off the bat that booklist would end up being a container.

8

00:00:35,190  -->  00:00:39,380
But let's talk a little bit about how that decision was made.

9

00:00:40,140  -->  00:00:46,380
I mean a diagram up here on the screen that kind of models or application a little bit.

10

00:00:47,040  -->  00:00:50,930
So the question is which component do we want to return into a container.

11

00:00:50,940  -->  00:00:53,640
And the answer is it varies.

12

00:00:53,640  -->  00:00:59,670
In general we want the most parent component that cares about a particular piece of state to be a container

13

00:00:59,690  -->  00:01:00,120
.

14

00:01:00,540  -->  00:01:04,890
So your first answer might be well the whole app contains cares about the state.

15

00:01:04,890  -->  00:01:05,530
Right.

16

00:01:05,560  -->  00:01:12,750
Whole app needs to care about the list of books and the app needs to know about the current active book

17

00:01:12,750  -->  00:01:12,900
.

18

00:01:13,020  -->  00:01:17,860
And when I say app I'm talking specifically about our component called Dog James.

19

00:01:18,300  -->  00:01:24,000
And the question in my answer there would be well you know I'm not so sure about that app doesn't really

20

00:01:24,000  -->  00:01:28,090
care about the list of books only book list does.

21

00:01:28,830  -->  00:01:34,590
And as far as the book detail well only book detail really changes cares about the active book

22

00:01:38,120  -->  00:01:42,930
The app on the other hand doesn't really care about the list of books and it doesn't care about the

23

00:01:43,260  -->  00:01:44,580
currently selected book.

24

00:01:44,580  -->  00:01:50,400
The only thing that app is here for is to say like hey please render bookless to the page and please

25

00:01:50,410  -->  00:01:53,430
render book detail to the page.

26

00:01:53,430  -->  00:01:59,100
So I'm going to go ahead and say that our book list and a component that will make it a little bit here

27

00:01:59,100  -->  00:02:06,240
the book detail should both be containers or smart components or components that have a direct connection

28

00:02:06,240  -->  00:02:13,500
to redux whereas app should be a dumb component or just a component you know what we would call just

29

00:02:13,500  -->  00:02:19,920
normally a component a component that doesn't have any touch or any handle on the data that's contained

30

00:02:19,920  -->  00:02:24,070
within sight of redux.

31

00:02:24,570  -->  00:02:29,700
If this were a real app we might just take the easy way out and say like OK we're just going to make

32

00:02:29,700  -->  00:02:35,730
app a container and everything else will just get all the props in here and we can just you know render

33

00:02:35,730  -->  00:02:39,180
the component all day with all of our state and not think twice about it.

34

00:02:39,270  -->  00:02:44,580
In this example though I really want to hammer home the fact that we only create containers out of components

35

00:02:44,580  -->  00:02:47,090
that care about a particular piece of state.

36

00:02:47,460  -->  00:02:52,680
So we're going to do things you know divide up a little pieces a little bit state here where the booklist

37

00:02:53,040  -->  00:02:57,800
is going to get the list of books and the book detail will get the active book.

38

00:02:58,200  -->  00:02:59,760
One more quick note.

39

00:03:00,120  -->  00:03:06,090
Only the most parent component that uses a particular piece of state needs to be connected to redux

40

00:03:06,110  -->  00:03:06,440
.

41

00:03:06,750  -->  00:03:11,230
So again the app doesn't really care about the active book.

42

00:03:11,940  -->  00:03:14,460
Only the book detail does.

43

00:03:15,900  -->  00:03:21,060
If the book lists however had some other child component that cared about the book list we wouldn't

44

00:03:21,060  -->  00:03:24,630
really want to contain connect to that child component and state as well.

45

00:03:24,630  -->  00:03:27,470
Only the parent which in this case would be the booklist.

46

00:03:28,120  -->  00:03:33,270
OK so if determined that book list needs to be connected to the books piece of state.

47

00:03:33,390  -->  00:03:39,510
So let's move or just verify that we do have the book list inside of the containers folder.

48

00:03:39,510  -->  00:03:44,190
So we're going to promote booklist to be in a container.

49

00:03:44,460  -->  00:03:51,900
So we need to now actually make use of the re-act redux library and hook it up to redux.

50

00:03:51,900  -->  00:03:56,610
I don't want to turn this lecture into a you know 20 minute section because it might take that long

51

00:03:56,610  -->  00:03:56,850
.

52

00:03:56,850  -->  00:03:59,590
So let's go ahead and take care of that in the next section.