1
00:00:00,680 --> 00:00:07,770
In the last section we created our first action creator action creators are functions that return actions

2
00:00:08,220 --> 00:00:14,910
and actions are objects that have a type property defined to them actions are used to tell her users

3
00:00:14,910 --> 00:00:17,580
to update in a very specific fashion.

4
00:00:17,580 --> 00:00:23,520
So the very specific action that we created should be informing our readers here that we intend to select

5
00:00:23,610 --> 00:00:24,620
a new book.

6
00:00:24,630 --> 00:00:26,810
So that's the that's the goal here.

7
00:00:26,880 --> 00:00:31,820
So we've got our action clear at this point in time but we need to figure out how to call it properly.

8
00:00:31,860 --> 00:00:34,530
So here's the process for calling an action creator.

9
00:00:34,530 --> 00:00:38,560
First we determine where we want to call this action creator from.

10
00:00:38,820 --> 00:00:43,750
Well chances are we want to call the action Creator from the list item component.

11
00:00:43,830 --> 00:00:48,810
You know whenever a user taps on this current section right here is when we want to call it action creator

12
00:00:48,810 --> 00:00:53,900
and say hey we need to select or update the currently selected library.

13
00:00:54,030 --> 00:00:59,820
Now I wish I could say that calling an action creator was as simple as importing it and you know just

14
00:00:59,910 --> 00:01:01,720
calling inside this compound right here.

15
00:01:01,830 --> 00:01:03,890
But it's not quite that easy.

16
00:01:04,050 --> 00:01:08,940
Here's the thing the action creator that we just made is a plain javascript function.

17
00:01:08,970 --> 00:01:09,550
Right.

18
00:01:09,600 --> 00:01:12,130
And it just returns a plain object.

19
00:01:12,390 --> 00:01:18,030
So the overriding theme with 3.0 beyond the fact that you know really confusing terminology is that

20
00:01:18,030 --> 00:01:19,280
it is not magic.

21
00:01:19,290 --> 00:01:25,650
There is no magic whatsoever just calling an action creator like you know if I just call this function

22
00:01:25,680 --> 00:01:32,520
and saw this object return nothing will automatically happen like redux does not magically say oh you

23
00:01:32,520 --> 00:01:34,720
just call the function from the actions file.

24
00:01:34,740 --> 00:01:38,340
Well you know let me take that action and do something with it.

25
00:01:38,340 --> 00:01:39,360
No that's not how it works.

26
00:01:39,360 --> 00:01:45,480
We have to make sure that the action and this action creator are specifically wired up to redux.

27
00:01:45,480 --> 00:01:50,910
So again general rule of thumb remember that for every part of redux application that we build from

28
00:01:50,910 --> 00:01:56,680
the components the actions the reducers they all have to be wired up at some point.

29
00:01:56,700 --> 00:02:01,090
So here's how we wire up our action creators inside of an application.

30
00:02:01,110 --> 00:02:03,410
This is a 100 percent reproducible process.

31
00:02:03,510 --> 00:02:08,460
So we're going to do it once now and then we'll do it again and again and again and again in the exact

32
00:02:08,520 --> 00:02:10,560
same fashion.

33
00:02:10,620 --> 00:02:15,140
First I'm going to go to the file that I want to call the action creator from.

34
00:02:15,140 --> 00:02:20,010
So inside the list item I want to really call that action creator so I can update the currently selected

35
00:02:20,010 --> 00:02:21,180
library.

36
00:02:21,420 --> 00:02:28,930
Then at the top I'm going to import all of my action creators from that actions index file.

37
00:02:29,310 --> 00:02:38,190
So I'm currently inside of my list item files so I need to go up one directory and then access the actions

38
00:02:38,190 --> 00:02:42,430
folder because the actions folder has an index file inside of it.

39
00:02:42,480 --> 00:02:46,620
I'm just going to import the actions folder and of course that will automatically give me the index

40
00:02:46,620 --> 00:02:47,380
file.

41
00:02:47,450 --> 00:02:49,470
Now I can do one really weird thing here.

42
00:02:49,500 --> 00:02:55,500
I'm going to say import star as actions from up one directory.

43
00:02:55,620 --> 00:02:56,490
Dot dot.

44
00:02:56,490 --> 00:03:00,390
Notice the dot dot there slash actions like so.

45
00:03:00,550 --> 00:03:02,940
OK it's already one weird thing here.

46
00:03:03,020 --> 00:03:05,530
One weird thing store as actions.

47
00:03:05,540 --> 00:03:06,680
What in the world is that.

48
00:03:06,870 --> 00:03:10,610
Well here's what's going on inside of my actions file.

49
00:03:10,650 --> 00:03:13,680
I might have many different action creators.

50
00:03:13,710 --> 00:03:14,410
Right.

51
00:03:14,420 --> 00:03:20,370
I have many different creators and I might want to use them all over the place in different components

52
00:03:20,370 --> 00:03:22,010
for different things.

53
00:03:22,050 --> 00:03:29,220
Whenever I export many things from a single file as I might do here I use just the export keyword.

54
00:03:29,220 --> 00:03:30,810
I do not use export default.

55
00:03:30,840 --> 00:03:39,030
So again if I want to export many things I just use the export keyword whenever I want to import many

56
00:03:39,030 --> 00:03:44,410
things from a file at one time and just get access to like the whole lot of them right.

57
00:03:44,520 --> 00:03:53,160
I can say store has and then some variable right here so start as actions means give me everything that

58
00:03:53,160 --> 00:03:58,310
was exported from the actions file and assign it to the variable actions.

59
00:03:58,890 --> 00:04:02,880
I could have done the same exact thing with the re-act need of import right here as well.

60
00:04:02,880 --> 00:04:10,200
I could have said you know something like Star as components and gotten access to like the text tag

61
00:04:10,200 --> 00:04:16,860
the view tag the text input all those different primitive tags that are provided by re-act native but

62
00:04:16,860 --> 00:04:22,800
in reac natives case I just wanted the text tagged in the actions case I wanted all of my available

63
00:04:22,800 --> 00:04:23,910
action creators.

64
00:04:24,080 --> 00:04:26,510
OK so quick aside there.

65
00:04:26,940 --> 00:04:29,400
So that's step 1 for calling an action creator.

66
00:04:29,400 --> 00:04:33,580
Step two is to import that connect helper from re-act redux.

67
00:04:33,780 --> 00:04:39,840
So up here I will import connect from re-act redux.

68
00:04:39,960 --> 00:04:46,670
Remember connect is are kind of like window to the whole world of redux from the Riak side of things.

69
00:04:46,830 --> 00:04:53,190
We use it previously to get access to our application state but we can also use the connect helper to

70
00:04:53,220 --> 00:04:56,700
call an action creator.

71
00:04:56,740 --> 00:05:00,790
Finally we will set up that connects helper at the bottom of our file again.

72
00:05:00,850 --> 00:05:03,610
So here's my x4 default statement.

73
00:05:03,610 --> 00:05:09,100
I will add in the connect helper with one set of parentheses and then wrap the list item with the second

74
00:05:09,100 --> 00:05:09,710
set.

75
00:05:11,580 --> 00:05:18,510
Now when we last used the connect helper we passed the function map state to probs as the first argument.

76
00:05:18,510 --> 00:05:21,790
That's the first that is the purpose of the first argument to connect right here.

77
00:05:21,800 --> 00:05:26,560
Like the first argument must be the map state to proper function.

78
00:05:26,640 --> 00:05:32,850
The purpose of the second argument however is to bind action creators to this component.

79
00:05:32,940 --> 00:05:37,620
Now because we do not have any map state to props so we want to pass to this.

80
00:05:37,620 --> 00:05:44,040
I'm going to pass and no as the first argument again the first argument is explicitly for map state

81
00:05:44,040 --> 00:05:44,850
to process.

82
00:05:45,000 --> 00:05:51,180
So if I don't want to map states props I have to pass and null here then is the second argument I will

83
00:05:51,180 --> 00:05:53,230
pass in my entire actions.

84
00:05:53,250 --> 00:06:00,220
Object this says take these action creators you know whatever's in here in this case you only have one

85
00:06:00,220 --> 00:06:07,290
right now and make sure that whenever they are called the actions go to the right place and then pass

86
00:06:07,290 --> 00:06:10,880
these actions down into the component as props.

87
00:06:11,050 --> 00:06:12,910
So this right here is doing two things.

88
00:06:12,910 --> 00:06:18,970
First off it is turning it's kind of like mutating the action creator right here from a kind of dumb

89
00:06:18,970 --> 00:06:25,240
function that just returns a you know actions like a silly object doesn't really do anything with it.

90
00:06:25,300 --> 00:06:31,660
It mutates this function into something special where whenever it is called It will be the returned

91
00:06:31,660 --> 00:06:37,460
action will be automatically dispatched to the redux store which is exactly what we want.

92
00:06:37,480 --> 00:06:42,310
The second thing that it does is it takes all of the actions that are inside the subject which again

93
00:06:42,340 --> 00:06:50,260
in our case we have just one and it passes them all to our component as props because a very common

94
00:06:50,260 --> 00:06:56,260
theme that you might see arising here whenever we use the connect helper it is modifying what data is

95
00:06:56,260 --> 00:06:59,100
going to show it to our list item as props.

96
00:06:59,110 --> 00:07:05,260
So just to make sure that's the case I'm going to add a console log statement inside of my component

97
00:07:05,320 --> 00:07:08,080
and I'm going to count the log props and I don't know.

98
00:07:08,110 --> 00:07:11,560
Error message keeps on popping up there anyways.

99
00:07:11,890 --> 00:07:15,970
So I've got to conc log here I'm just going to cancel my profs object.

100
00:07:16,690 --> 00:07:20,020
Let's now flip over to my council here.

101
00:07:20,020 --> 00:07:21,760
I will also in my simulator.

102
00:07:22,000 --> 00:07:24,030
Let's do a refresh.

103
00:07:25,060 --> 00:07:31,900
And very interestingly you will notice that because my component is rendered nine times here I get nine

104
00:07:31,900 --> 00:07:38,260
separate console logs and if I expand any of these you'll see that my props object now has an argument

105
00:07:38,320 --> 00:07:40,750
called select library.

106
00:07:40,810 --> 00:07:43,060
So this is my action creator right here.

107
00:07:43,060 --> 00:07:45,610
I can now call this action creator.

108
00:07:45,610 --> 00:07:52,540
I can pass in the ID of the library that I want to select that will generate an action.

109
00:07:52,630 --> 00:07:55,320
So here's my select library action right here.

110
00:07:55,330 --> 00:08:00,130
It will generate this action and it will automatically dispatch it to all the different reducers in

111
00:08:00,130 --> 00:08:01,510
my application.

112
00:08:01,510 --> 00:08:08,140
So in practice you know when we had previously worked with redux and we called stort dispatch ourselves

113
00:08:08,380 --> 00:08:13,440
in practice we do not have to call dispatch ourselves from our components.

114
00:08:13,540 --> 00:08:17,900
We use this kind of automatic binding with the connect helper to do it for us.

115
00:08:19,460 --> 00:08:20,120
OK.

116
00:08:20,190 --> 00:08:27,370
So at this point in time we've now got access to our action crater's select library inside of our component.

117
00:08:27,450 --> 00:08:33,110
All we have to do is call it with the very particular library's ID that we want to select.

118
00:08:33,120 --> 00:08:34,790
There's just one little problem here.

119
00:08:34,950 --> 00:08:40,530
We don't yet have anything to receive a touchy event here like nothing to receive a press event like

120
00:08:40,530 --> 00:08:42,510
we did previously with the button.

121
00:08:42,510 --> 00:08:45,630
Remember only touchable components can receive top events.

122
00:08:45,720 --> 00:08:50,880
So we're going to need to import one into this component to receive a tap in that let's take care of

123
00:08:50,880 --> 00:08:55,660
that in the next section and do a big review on how all these action creators work