1

00:00:00,980  -->  00:00:03,020
So are apt so far as looking pretty good.

2

00:00:03,090  -->  00:00:05,060
We've got our list of books here.

3

00:00:05,220  -->  00:00:06,890
You know it took a little bit of code to get here.

4

00:00:06,930  -->  00:00:11,770
Well kind of a lot of code that look kind of confusing but we do have our list of books.

5

00:00:11,850  -->  00:00:14,110
There's just one problem right now.

6

00:00:14,340  -->  00:00:18,210
Our books producer always returns the same list of books.

7

00:00:18,210  -->  00:00:21,250
So in other words our application state is always the same.

8

00:00:21,270  -->  00:00:22,900
It's 100 percent static.

9

00:00:22,920  -->  00:00:26,110
We don't have the ability to change that state over time.

10

00:00:26,370  -->  00:00:30,890
And a little bit we're going to want to be able to introduce the concept of an active book.

11

00:00:31,200  -->  00:00:35,970
And as you might imagine the active book needs to be able to change as the user clicks on different

12

00:00:35,970  -->  00:00:36,890
buttons.

13

00:00:37,170  -->  00:00:40,920
So that's really a piece of our application state that needs to change over time.

14

00:00:40,930  -->  00:00:47,850
You know it's a dynamic piece of our application state changing our state is what actions and action

15

00:00:47,850  -->  00:00:49,430
creators are for.

16

00:00:49,830  -->  00:00:56,040
So I going to pull a diagram on the screen that we're going to walk through to help us understand actions

17

00:00:56,040  -->  00:00:58,750
and action creators a little bit more.

18

00:00:58,770  -->  00:01:02,190
Now this diagram is a little bit crazy but just bear with me for a little bit.

19

00:01:02,190  -->  00:01:04,110
We're going to go through it step by step.

20

00:01:04,740  -->  00:01:10,950
So this is the diagram of the lifecycle of an action and a redux application.

21

00:01:10,950  -->  00:01:13,090
Everything in a rebox application.

22

00:01:13,190  -->  00:01:19,650
While most everything starts off with an event triggered by a user either directly or indirectly this

23

00:01:19,650  -->  00:01:25,200
event could be them say you know clicking on a button like you know a book over here selecting an item

24

00:01:25,200  -->  00:01:28,560
from a dropdown or hovering on a particular element.

25

00:01:28,830  -->  00:01:35,760
But it can also be kind of more indirect things like say a Ajax request finishing loading up or a page

26

00:01:35,760  -->  00:01:42,210
initially loading up on the actual web page finishing loading all of these events can optionally call

27

00:01:42,300  -->  00:01:50,150
an action creator an action creator is a function that returns an action.

28

00:01:50,410  -->  00:01:51,310
And this diagram.

29

00:01:51,420  -->  00:01:53,430
Let's look at the top flow here right now.

30

00:01:53,430  -->  00:01:54,900
We've got book number two.

31

00:01:54,960  -->  00:02:02,040
So let's say that whenever the button here Book Number two is clicked we choose because we do have to

32

00:02:02,040  -->  00:02:06,800
define this is something that we're going to specifically define whenever whenever a user clicks on

33

00:02:06,810  -->  00:02:16,290
button number two it's going to call an action creator the action creator is just a function that returns

34

00:02:16,380  -->  00:02:17,280
an object.

35

00:02:17,340  -->  00:02:22,530
So you can see right here we've got our function and it returns an object.

36

00:02:22,710  -->  00:02:25,640
We'll talk about what's going on inside of the object here in this little bit.

37

00:02:25,650  -->  00:02:28,020
But let's just ignore that stuff right now.

38

00:02:28,560  -->  00:02:37,110
So the action creator returns an object that object is then automatically sent to all the different

39

00:02:37,110  -->  00:02:39,590
reducers inside of our application.

40

00:02:39,690  -->  00:02:40,790
So it doesn't matter.

41

00:02:40,830  -->  00:02:45,780
You know we might have 20 different reducers all of these actions are going to flow through all of those

42

00:02:45,780  -->  00:02:46,500
reducers

43

00:02:49,020  -->  00:02:57,210
reducers can choose depending on the action to return a different piece of state depending on what the

44

00:02:57,210  -->  00:03:06,840
action is that newly returned Peace of state then gets piped into the application state and then application

45

00:03:06,840  -->  00:03:12,840
state then gets pumped back into our re-act application which causes all of our components to re render

46

00:03:12,850  -->  00:03:13,280
.

47

00:03:13,720  -->  00:03:14,080
OK.

48

00:03:14,100  -->  00:03:18,050
So with one run through there let's go through it again but in greater detail.

49

00:03:18,740  -->  00:03:24,870
So let's say that whenever a user clicks on this button Book Number two we call an action creator.

50

00:03:24,930  -->  00:03:29,340
And you know don't worry we'll go through the process of setting up that action crater entirely but

51

00:03:29,700  -->  00:03:31,650
just bear with me for a little bit.

52

00:03:31,650  -->  00:03:38,490
So again they click on number two and it calls an action creator the action creator is a function that

53

00:03:38,490  -->  00:03:46,840
returns an object the object has a type that describes the type of action that was just triggered.

54

00:03:46,950  -->  00:03:54,390
So in this case we might have a type of say a book selected the action can also have some data that

55

00:03:54,390  -->  00:03:56,040
further describes the action.

56

00:03:56,060  -->  00:04:02,210
And in this case we've got a property on here a book that contains the actual selected book you know

57

00:04:02,220  -->  00:04:08,480
in this case the book with title of book too kind of boring book I guess whatever.

58

00:04:08,640  -->  00:04:14,670
So the action creator returns that object and the actual object itself is our actual action it's what

59

00:04:14,670  -->  00:04:21,660
we call an action the action is automatically sent to all of the reducers inside of our application

60

00:04:25,210  -->  00:04:26,420
what will usually do.

61

00:04:26,460  -->  00:04:31,710
Inside of all our different reducers and we'll do some a little bit is set up is switch statement inside

62

00:04:31,710  -->  00:04:40,500
of our reducers and the switch statement will basically go to a different line depending on the type

63

00:04:40,500  -->  00:04:41,250
of the action.

64

00:04:41,280  -->  00:04:49,490
So you can see in the code here we'll do a switch on action type and if the book is selected earthy

65

00:04:49,790  -->  00:04:56,760
excuse me and the case that the action type is books selected we will return action dot book which in

66

00:04:56,760  -->  00:05:03,630
this case would be like you know that the book that we just clicked on reducers doesn't have to react

67

00:05:03,630  -->  00:05:04,800
to every different action.

68

00:05:04,800  -->  00:05:10,380
It can say like I don't care anything about the current action like it doesn't matter to me in which

69

00:05:10,380  -->  00:05:16,500
case it just returns its current state and no status change for that particular reducer.

70

00:05:16,860  -->  00:05:23,760
If the producer does care about the action it can return something and that newly returned value will

71

00:05:23,760  -->  00:05:25,950
be the new value of state.

72

00:05:26,190  -->  00:05:31,860
So in this particular case here for the books selected type of action the action will flow into the

73

00:05:31,860  -->  00:05:40,490
reducer here will do a switch on action type if the action type is books selected.

74

00:05:40,570  -->  00:05:47,180
The reducer word turn action dot book so the book that was dispatched with the action appear right.

75

00:05:47,220  -->  00:05:54,990
So basically the book was titled too because this active book reducer is wired up to the active book

76

00:05:55,860  -->  00:05:58,440
key on our state and we haven't wired that up yet.

77

00:05:58,440  -->  00:06:01,560
We are going to do that very shortly.

78

00:06:01,620  -->  00:06:04,560
It pops up as the new value of the state.

79

00:06:04,560  -->  00:06:09,780
So whatever is returned from this reduce ends up as the new value of the state.

80

00:06:10,440  -->  00:06:15,270
So in this case this title javascript might be a little bit misleading in this case it would actually

81

00:06:15,270  -->  00:06:18,840
be titled book 2.

82

00:06:19,080  -->  00:06:26,730
Once all the reducers have processed the action and you are chosen to return state or said no I don't

83

00:06:26,730  -->  00:06:33,720
care about that action and can return my current state that new newly assembled action of the newly

84

00:06:33,720  -->  00:06:39,990
assembled state gets pumped back into all the different containers and then all the different containers

85

00:06:39,990  -->  00:06:42,540
will run that function that we defined in the last section.

86

00:06:42,550  -->  00:06:50,010
You remember the map state to prop's Celil redrawn that state will to get dissected injected into all

87

00:06:50,010  -->  00:06:54,410
the different containers and all those containers will render with all their data.

88

00:06:54,750  -->  00:06:56,690
So that's basically the entire flow right.

89

00:06:56,700  -->  00:07:02,280
Once that re-offender finishes our application is then sitting there waiting for the user to trigger

90

00:07:02,310  -->  00:07:04,770
another event when they trigger another event.

91

00:07:04,770  -->  00:07:06,850
We go through the entire process again.

92

00:07:06,960  -->  00:07:13,560
We call an action creator that returns an action the action flows to reducers the reducers assemble

93

00:07:13,680  -->  00:07:17,810
our new state and the new state flows into all the containers.

94

00:07:18,640  -->  00:07:19,350
All right.

95

00:07:19,590  -->  00:07:23,550
So based on the diagram alone this is confusing to understand.

96

00:07:23,700  -->  00:07:26,060
So let's go ahead and get to work.

97

00:07:27,000  -->  00:07:30,810
Putting together the concept of our active book in the next section