In the last section we add in another reduce or whose purpose was to record whether or not a particular 2
row was selected or not by default that reduced or will always return NULL. 3
So we don't really have any selection logic right now which means we need to figure out how to update 4
the currently selected ID from the list item. 5
So in other words when a user taps on a list item. 6
How do I make sure to update my selected library ID piece of state. 7
So that's what we're going to try to figure out here at this point in time. 8
We have not really made use of any actions inside this component just yet so we're going to have to 9
remember from our very brief walkthrough on redux exactly how we update any piece of state and cyder 10
application. 11
It's going to pull up a diagram really quick. 12
And here we go. 13
OK. 14
So if you recall we had introduced the concept of actions in addition to our reducers much previously 15
so forget these two squares words on the left hand side. 16
Let's just focus on the right hand side. 17
An action is a plain javascript object that has a type property. 18
This type property can be thought of as like a command or a direction like an instruction to be passed 19
off to the reducer. 20
So in our case we might create an action of type I don't know maybe like select a library or something 21
like that and pass along the ID of the library to be selected then inside of our selection reducer we 22
should record that very particular ID. 23
Right we should say okay this is now the idea that is selected but we're missing a little bit of a piece 24
of the puzzle there. 25
We are inside of a component. 26
So how exactly do we create or dispatch an action from inside of a component. 27
Well I'm going to throw another piece of redux terminology Aggi now. 28
Obviously it is the you know extra square on this diagram here. 29
We're going to create what is called an action creator. 30
So inside of the previous example three locks we did we created an action and called stored dot dispatch 31
to send off that action to all of our inducers inside of a re-act redux application. 32
That process is just a little bit different. 33
So inside of a re-act application we make what is called an action creator and then we call the action 34
creator. 35
The purpose of the action creator is to just exactly as the name suggests create an action. 36
That's it. 37
It creates an action. 38
So again in the kind of theme of putting plain text definitions do all these things the purpose. 39
Let me give a plain text definition actually creator and actually creator is a javascript function that 40
returns an action. 41
That's it. 42
OK so let me stop lecturing now because I know sometimes I go overboard. 43
Let's get some practice with creating an action creator. 44
So back inside my project directory I'm going to make a new folder inside of my source directory called 45
actions and then insight of actions I'm going to make another file called index dot J.S.. 46
So inside of this file is where I will locate all of the different action credos for my project. 47
In this case I only start to have one action creator because the only action we have is the ability 48
to change the currently selected library. 49
So I expect to just have one single action creator inside this file right now remember that an action 50
creator is a javascript function. 51
So I'm going to create a function and immediately export it. 52
So I mean to say export Konst select library and that is going to be a function like so then inside 53
of here I will return my action. 54
So I'm going to return a plain javascript object with property type of select library. 55
Ok so I know I know they move very quickly right there. 56
But let's let's like take a step back and look at what we just did today. 57
I want you to focus most on is the very internal like statement or expression inside of this entire 58
file right here. 59
I have an object with a type property. 60
We've gone over this several times now. 61
An object with a type property is an action and an action is how we cause producers to update the data 62
that they produce. 63
The action is wrapped by a function which we refer to as an action creator. 64
So this function right here is what we call an action creator 65
whenever we call this action creator they return to action will be automatically dispatched to us for 66
us and sent off to all the different reducers. 67
OK so last thing we have to do with this action right here is figure out well you know we are selecting 68
a library but we need to make sure that we instruct the reducer exactly which library we are trying 69
to select. 70
So I'm going to suggest that we whenever we call this action creator right here we should pass in the 71
ID of the library that we want to select. 72
So I'm going to add an argument to this library ID and then I will attach a payload to the action library 73
ID. 74
So now whenever I call this action creator I must provide a library Id like the library that I want 75
to select and that will be attached to the action as the payload. 76
OK. 77
So this looks good. 78
It's a good first pass on on this action and action creator. 79
I still feel like we went over this whole topic of action very very quickly. 80
So let's continue the next section. 81
Figure out how we use an action creator and then do a quick review on the entire topic.