1

00:00:00,840  -->  00:00:06,360
In the last section we finished promoting our book list from a normal Riak component to being a container

2

00:00:06,370  -->  00:00:06,970
.

3

00:00:07,650  -->  00:00:13,980
So we finished wiring up our first container and our first reducer the book's reducer I take a second

4

00:00:13,980  -->  00:00:16,200
to review exactly what's going on here.

5

00:00:16,200  -->  00:00:20,760
You know the flow throughout the entire application right now just in case stuff is a little bit confusing

6

00:00:20,760  -->  00:00:21,790
still.

7

00:00:21,960  -->  00:00:25,040
If you feel comfortable with where everything is out feel free to go the next section.

8

00:00:25,050  -->  00:00:29,700
Otherwise sit around for a little bit and let's go through the walkthrough of what's going on one more

9

00:00:29,700  -->  00:00:33,770
time just make sure that it's nice and extra clear here.

10

00:00:34,050  -->  00:00:37,090
Truthfully to me some of this still seems a little bit like magic.

11

00:00:37,110  -->  00:00:41,980
And so you know I still find it a little bit challenging to sometimes trace data you know okay we've

12

00:00:42,000  -->  00:00:45,470
got to reducers somehow that's showing up inside the booklist blah blah.

13

00:00:45,570  -->  00:00:48,900
Kind of hard to you know trace the flow of the application.

14

00:00:48,900  -->  00:00:52,490
So let's review this one more time first.

15

00:00:52,530  -->  00:00:53,500
An overall note.

16

00:00:53,910  -->  00:01:00,600
Remember that redux serves to construct the application state and re-act provides the views to display

17

00:01:00,600  -->  00:01:06,870
that stee the two libraries are inherently disconnected and it's only through the use of re-act redux

18

00:01:06,870  -->  00:01:11,170
that we get any clear connection between the two.

19

00:01:11,280  -->  00:01:16,320
Next our application state is generated by reducer functions.

20

00:01:16,790  -->  00:01:20,010
We created one reducer called reducer.

21

00:01:20,010  -->  00:01:26,090
Books are books reducer the book's producer always returns an array of books.

22

00:01:26,100  -->  00:01:26,800
No matter what.

23

00:01:26,880  -->  00:01:29,710
Always the same array.

24

00:01:30,150  -->  00:01:36,630
The array contains a list of objects where each object represents one book and it has just the title

25

00:01:36,630  -->  00:01:36,990
of a book.

26

00:01:36,990  -->  00:01:46,900
For right now we added this book's reducer to our combined reducers call right here inside of index

27

00:01:46,900  -->  00:01:52,840
Stut J us inside of 30 reducers folder.

28

00:01:53,220  -->  00:02:00,660
This reducers going to add a key to our global application state called books where the key is books

29

00:02:00,750  -->  00:02:06,540
and the value is whatever gets returned from the books reducer which in this case is our array of books

30

00:02:06,540  -->  00:02:07,440
.

31

00:02:07,470  -->  00:02:09,290
That's essentially the end of this thread here.

32

00:02:09,330  -->  00:02:16,830
Our state is really just always going to be equal to an object with a key of books and a value of an

33

00:02:16,830  -->  00:02:17,770
array of books.

34

00:02:17,790  -->  00:02:19,890
That's it.

35

00:02:19,890  -->  00:02:28,140
Next we created a component book list that started off as a component but then we decided that it needed

36

00:02:28,140  -->  00:02:36,480
to be aware of our state within our read redux within the redux side of the application because booklist

37

00:02:36,480  -->  00:02:37,940
had to be aware that state.

38

00:02:37,980  -->  00:02:46,710
We decided to promote it to a container we promoted bookless to a container by first importing the connect

39

00:02:46,710  -->  00:02:54,390
function from re-act redux and then we defined map state to props and we hooked our component together

40

00:02:54,450  -->  00:03:00,040
with MAP state to props using the connect function.

41

00:03:00,180  -->  00:03:06,330
We chose the component booklist to connect to the redux store specifically because only booklist in

42

00:03:06,330  -->  00:03:09,890
our application really cares about the list of books.

43

00:03:10,020  -->  00:03:15,570
The OP doesn't really care about it it doesn't need to know about the list of books at all.

44

00:03:15,570  -->  00:03:24,510
Finally we made sure that app actually rendered that booklist here and last of all we refreshed our

45

00:03:24,600  -->  00:03:30,930
application in the browser and we saw that code in action read X generated a state object that contained

46

00:03:30,930  -->  00:03:38,220
our books and then mapped that state as props to our component because the state was updated through

47

00:03:38,220  -->  00:03:43,090
our producer our component re rendered with that list of books.

48

00:03:43,860  -->  00:03:49,710
So one last reminder here for the probably fifth or sixth time a container is a normal re-act component

49

00:03:49,770  -->  00:03:55,770
that gets bonded to the application state and we connect the two we meld the two together whenever the

50

00:03:55,770  -->  00:03:57,560
application state changes.

51

00:03:57,570  -->  00:04:00,340
The container will read render as well.

52

00:04:01,200  -->  00:04:07,770
OK so without review complete let's move forward towards the next part of our application which is selecting

53

00:04:07,800  -->  00:04:08,840
a particular book