In the last section we created our first action creator action creators are functions that return actions
and actions are objects that have a type property defined to them actions are used to tell her users
to update in a very specific fashion.
So the very specific action that we created should be informing our readers here that we intend to select
a new book.
So that's the that's the goal here.
So we've got our action clear at this point in time but we need to figure out how to call it properly.
So here's the process for calling an action creator.
First we determine where we want to call this action creator from.
Well chances are we want to call the action Creator from the list item component.
You know whenever a user taps on this current section right here is when we want to call it action creator
and say hey we need to select or update the currently selected library.
Now I wish I could say that calling an action creator was as simple as importing it and you know just
calling inside this compound right here.
But it's not quite that easy.
Here's the thing the action creator that we just made is a plain javascript function.
Right.
And it just returns a plain object.
So the overriding theme with 3.0 beyond the fact that you know really confusing terminology is that
it is not magic.
There is no magic whatsoever just calling an action creator like you know if I just call this function
and saw this object return nothing will automatically happen like redux does not magically say oh you
just call the function from the actions file.
Well you know let me take that action and do something with it.
No that's not how it works.
We have to make sure that the action and this action creator are specifically wired up to redux.
So again general rule of thumb remember that for every part of redux application that we build from
the components the actions the reducers they all have to be wired up at some point.
So here's how we wire up our action creators inside of an application.
This is a 100 percent reproducible process.
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
same fashion.
First I'm going to go to the file that I want to call the action creator from.
So inside the list item I want to really call that action creator so I can update the currently selected
library.
Then at the top I'm going to import all of my action creators from that actions index file.
So I'm currently inside of my list item files so I need to go up one directory and then access the actions
folder because the actions folder has an index file inside of it.
I'm just going to import the actions folder and of course that will automatically give me the index
file.
Now I can do one really weird thing here.
I'm going to say import star as actions from up one directory.
Dot dot.
Notice the dot dot there slash actions like so.
OK it's already one weird thing here.
One weird thing store as actions.
What in the world is that.
Well here's what's going on inside of my actions file.
I might have many different action creators.
Right.
I have many different creators and I might want to use them all over the place in different components
for different things.
Whenever I export many things from a single file as I might do here I use just the export keyword.
I do not use export default.
So again if I want to export many things I just use the export keyword whenever I want to import many
things from a file at one time and just get access to like the whole lot of them right.
I can say store has and then some variable right here so start as actions means give me everything that
was exported from the actions file and assign it to the variable actions.
I could have done the same exact thing with the re-act need of import right here as well.
I could have said you know something like Star as components and gotten access to like the text tag
the view tag the text input all those different primitive tags that are provided by re-act native but
in reac natives case I just wanted the text tagged in the actions case I wanted all of my available
action creators.
OK so quick aside there.
So that's step 1 for calling an action creator.
Step two is to import that connect helper from re-act redux.
So up here I will import connect from re-act redux.
Remember connect is are kind of like window to the whole world of redux from the Riak side of things.
We use it previously to get access to our application state but we can also use the connect helper to
call an action creator.
Finally we will set up that connects helper at the bottom of our file again.
So here's my x4 default statement.
I will add in the connect helper with one set of parentheses and then wrap the list item with the second
set.
Now when we last used the connect helper we passed the function map state to probs as the first argument.
That's the first that is the purpose of the first argument to connect right here.
Like the first argument must be the map state to proper function.
The purpose of the second argument however is to bind action creators to this component.
Now because we do not have any map state to props so we want to pass to this.
I'm going to pass and no as the first argument again the first argument is explicitly for map state
to process.
So if I don't want to map states props I have to pass and null here then is the second argument I will
pass in my entire actions.
Object this says take these action creators you know whatever's in here in this case you only have one
right now and make sure that whenever they are called the actions go to the right place and then pass
these actions down into the component as props.
So this right here is doing two things.
First off it is turning it's kind of like mutating the action creator right here from a kind of dumb
function that just returns a you know actions like a silly object doesn't really do anything with it.
It mutates this function into something special where whenever it is called It will be the returned
action will be automatically dispatched to the redux store which is exactly what we want.
The second thing that it does is it takes all of the actions that are inside the subject which again
in our case we have just one and it passes them all to our component as props because a very common
theme that you might see arising here whenever we use the connect helper it is modifying what data is
going to show it to our list item as props.
So just to make sure that's the case I'm going to add a console log statement inside of my component
and I'm going to count the log props and I don't know.
Error message keeps on popping up there anyways.
So I've got to conc log here I'm just going to cancel my profs object.
Let's now flip over to my council here.
I will also in my simulator.
Let's do a refresh.
And very interestingly you will notice that because my component is rendered nine times here I get nine
separate console logs and if I expand any of these you'll see that my props object now has an argument
called select library.
So this is my action creator right here.
I can now call this action creator.
I can pass in the ID of the library that I want to select that will generate an action.
So here's my select library action right here.
It will generate this action and it will automatically dispatch it to all the different reducers in
my application.
So in practice you know when we had previously worked with redux and we called stort dispatch ourselves
in practice we do not have to call dispatch ourselves from our components.
We use this kind of automatic binding with the connect helper to do it for us.
OK.
So at this point in time we've now got access to our action crater's select library inside of our component.
All we have to do is call it with the very particular library's ID that we want to select.
There's just one little problem here.
We don't yet have anything to receive a touchy event here like nothing to receive a press event like
we did previously with the button.
Remember only touchable components can receive top events.
So we're going to need to import one into this component to receive a tap in that let's take care of
that in the next section and do a big review on how all these action creators work