1

00:00:01,330  -->  00:00:07,770
In the last section we wrote our first producer the book's producer and we wired it up to our application

2

00:00:07,800  -->  00:00:13,530
inside of this combine reducers function where the key was the piece of state or the name of the piece

3

00:00:13,530  -->  00:00:17,520
of state and the value was the reducer itself.

4

00:00:17,520  -->  00:00:23,130
When we passed this object to combine reducers we're essentially telling Ridd redux how to create our

5

00:00:23,130  -->  00:00:29,030
application state in this example that we have right now if we went ahead and ran this in the browser

6

00:00:29,430  -->  00:00:35,760
our application have a single piece of state called books where the value was whatever gets returned

7

00:00:35,820  -->  00:00:37,980
from the books reduce or function.

8

00:00:38,040  -->  00:00:44,550
And right now that's just a list of objects in this section.

9

00:00:44,550  -->  00:00:48,960
We're going to go ahead and make sure that the code we wrote is actually generating usable state for

10

00:00:48,990  -->  00:00:50,450
application.

11

00:00:50,520  -->  00:00:55,830
We're going to do this by creating a booklist component within react.

12

00:00:56,910  -->  00:01:02,090
So let's go ahead and get started by creating a new file inside of our components directory.

13

00:01:02,700  -->  00:01:06,200
We're going to call this book list.

14

00:01:06,350  -->  00:01:07,540
Yes.

15

00:01:08,370  -->  00:01:13,420
So again the only purpose of this component I hear is just going to be to render a list of books.

16

00:01:13,440  -->  00:01:18,200
So we're going to kind of speed through this component real quick and then get to the back to the state

17

00:01:18,210  -->  00:01:19,420
topic here.

18

00:01:19,560  -->  00:01:22,680
A lot of the topics that we're going to cover in this we've already covered is just really you know

19

00:01:22,890  -->  00:01:27,060
building a list of building a list out of a component.

20

00:01:27,360  -->  00:01:30,490
So we'll do our boiler plate at the top right.

21

00:01:30,510  -->  00:01:45,390
Import re-act component from react and then we'll create our class explore default class book list and

22

00:01:45,390  -->  00:01:53,340
it's going to extend component inside of you will create or render function.

23

00:01:53,940  -->  00:02:04,680
And we're going to have it return a UL with a class name of list group and call them for these class

24

00:02:04,680  -->  00:02:09,450
names are just part of a bootstrap just to make things look kind of nice for us as we go through this

25

00:02:11,340  -->  00:02:16,630
and we'll close the UL tag and we're going to go ahead and build our list.

26

00:02:16,680  -->  00:02:21,830
Now we're going to pull the list building out to a separate function called render list.

27

00:02:22,290  -->  00:02:26,860
When or if we ever want to call a separate function within our GSX no problem.

28

00:02:26,880  -->  00:02:32,040
Just as before when we reference any javascript variable we write curly braces.

29

00:02:32,220  -->  00:02:35,460
And then this Daut render list

30

00:02:38,490  -->  00:02:44,520
so then that we'll call a new function that will define called render list like so.

31

00:02:45,810  -->  00:02:50,460
Then inside if you're We're going to pretend we haven't done this yet we're gonna do it just a little

32

00:02:50,460  -->  00:02:51,550
bit.

33

00:02:51,600  -->  00:02:56,040
We're going to return this stop probs start books.

34

00:02:56,040  -->  00:03:01,560
So we're going to imagine or we're going to plan that we're going to wire up the list of books to be

35

00:03:01,560  -->  00:03:08,520
on this dot props for the booklist and we'll map over that array.

36

00:03:09,510  -->  00:03:15,630
And for each element in the array will return an ally

37

00:03:18,300  -->  00:03:30,080
with a class name of list group item and inside the illai will put book title and then close the line

38

00:03:30,100  -->  00:03:30,820
.

39

00:03:31,410  -->  00:03:34,520
One thing in here don't forget we've got to add a key because it is a list.

40

00:03:34,590  -->  00:03:37,760
So add the book title.

41

00:03:37,830  -->  00:03:43,140
Remember we just need to use a unique value for the key so we can just use the title of the book.

42

00:03:43,140  -->  00:03:48,060
We're going to you know relatively sure that that value is always going to be unique throughout the

43

00:03:48,060  -->  00:03:49,830
entire list.

44

00:03:49,830  -->  00:03:50,520
OK.

45

00:03:51,060  -->  00:03:52,890
So this component looks pretty reasonable.

46

00:03:52,890  -->  00:04:00,840
It creates a UL and then it calls a helper function called render list this render list is going to

47

00:04:00,840  -->  00:04:06,020
map over an array of books which we haven't passed into this component yet but we will shortly.

48

00:04:06,390  -->  00:04:17,780
And for each book in the array we just create a lie that contains the book's title call.

49

00:04:18,000  -->  00:04:19,630
So we've got our component here.

50

00:04:19,770  -->  00:04:26,130
All we have to do now is plug in our application state into this somehow get it into here.

51

00:04:26,150  -->  00:04:35,160
As this props books this is a merger that we saw in the previous state diagrams remember where we somehow

52

00:04:35,190  -->  00:04:43,590
combine our re-act views and our read out state to generate what we call a usable application connecting

53

00:04:43,590  -->  00:04:48,000
these two separate libraries redux and react and do keep in mind they're separate.

54

00:04:48,030  -->  00:04:55,080
There's absolutely no intrinsic connection between react and redox is done with a separate library called

55

00:04:55,230  -->  00:05:03,240
re-act redux re-act redux is already included in this boilerplate package so we can make use of it right

56

00:05:03,240  -->  00:05:04,800
away.

57

00:05:04,830  -->  00:05:08,510
So here's how we're going to make use that library.

58

00:05:08,760  -->  00:05:14,820
We're going to define one of our components as a container instead of a component.

59

00:05:14,820  -->  00:05:18,110
So we've been using the word you know component all the time here.

60

00:05:18,260  -->  00:05:19,970
Kind of interchangeable with view.

61

00:05:20,220  -->  00:05:26,040
Instead we're going to promote one of these components to what we're going to call a container.

62

00:05:26,730  -->  00:05:33,280
A container is a re-act component that has a direct connection to the state managed by redux.

63

00:05:33,420  -->  00:05:39,060
So again remember we have our data in our application.

64

00:05:39,060  -->  00:05:40,900
We have the views and the application.

65

00:05:41,010  -->  00:05:47,940
And together they form our working usable app the left hand side is redux the right hand side as react

66

00:05:48,390  -->  00:05:49,480
in the middle.

67

00:05:49,530  -->  00:05:53,000
You can imagine that we have this new library called re-act redux.

68

00:05:53,010  -->  00:05:57,560
It's what forms the bridge between these two separate libraries.

69

00:05:58,410  -->  00:06:04,530
The only time we ever get this bridge available where we can take a re-act component and inject state

70

00:06:04,530  -->  00:06:11,340
into it you know kind of inject data into it is a component we call a container.

71

00:06:11,340  -->  00:06:17,730
Containers are also some kind sometimes called in the official read redux docs Smar components as opposed

72

00:06:17,730  -->  00:06:19,120
to a done component.

73

00:06:19,410  -->  00:06:26,310
So right now we've got a dumb component right here because it does not have any direct connection to

74

00:06:26,340  -->  00:06:28,140
redux.

75

00:06:29,310  -->  00:06:34,140
So containers really end up looking pretty identical to that component but they are distinctly different

76

00:06:34,500  -->  00:06:36,130
to indicate this difference.

77

00:06:36,150  -->  00:06:38,550
We usually separate them into different directories.

78

00:06:38,550  -->  00:06:41,490
So right now we've got a component's directory.

79

00:06:41,730  -->  00:06:49,500
Instead we're going to put all of our containers into a different directory called containers.

80

00:06:49,530  -->  00:06:52,220
It's going to go ahead and create a new folder here called containers

81

00:06:54,750  -->  00:07:01,220
and then I'm going to go ahead and cut our booklist and paste it into containers.

82

00:07:01,220  -->  00:07:06,380
So I'm moving the file over here that's all.

83

00:07:06,510  -->  00:07:10,110
So we can now create our first container out of this booklist.

84

00:07:10,270  -->  00:07:15,390
There's just one question left you know which components do we promote to be in the container and which

85

00:07:15,390  -->  00:07:20,060
do we leave as normal components before we promote this booklist.

86

00:07:20,130  -->  00:07:22,320
Let's answer that question the next section