In the section we're going to continue working on the redux side of our application by setting up some
action creators and then wiring them up to our Google component.
So inside of my actions directory I'm going to open up my index file.
So inside of here we want to eventually have two action creators one called Sign in and one called sign
out these are going to be extremely straightforward action creators.
We're only going to call them after we have successfully either logged user in or logged the user out
through the API library.
So inside of my index as file I'm going to define a action creator called Sign in and inside this thing
I'm going to return an object and it will have a type of sign in.
And that's pretty much it.
So we're going to eventually have a Auth. reducer or something with that particular name or something
similar to it.
Anytime that it sees a action of type sign in it will probably have some internal boolean flag that
updates the sign in status to true.
That's pretty much it.
So we'll also have a nother action creator called sign out and this one will basically have the exact
same opposite effect so all return an object with that type of sign outs.
And now any time that our author reduces that we'll eventually put together CS that action.
It's going to flip that boolean flag of whether or not these are signed into false.
So pretty straightforward on the creator side let's don't hook these up to our Google off component
using the reactor redux library.
So I'm going to flip back over to the Google file at the top.
I'm going to import connect and I'll also import my two action creators of sign in and sign out from
up one directory actions like so and then we'll hook all this stuff up at the bottom of the file.
So down here at the bottom I'll find my export default.
I'm going to wrap it with the second set parentheses have a connect call.
At present we don't have a map state to prop's functional personal as the first argument and then as
the second argument I'll put an OT option is to be an object in which sign in and sign out.
All right so now inside of our component we need to make sure that once the user successfully signs
in or signs out we call the appropriate action creator.
So I'm going to find my on off change callback.
Remember we wired this thing up to the Google API library with the is signed entlassen colorant year.
So this function is going to be called Anytime that our authentication status changes according to the
Google API.
Now at present we are getting whether or not the user is signed in from a call to this dot dot is signed
in get.
In reality I didn't mention this at the time but this callback function right here actually gets called
with a boolean argument of either true or false to indicate whether or not the user is signed in.
So we don't actually have to reach back into the odd instance and call the is signed in get.
We can instead just receive it as an argument.
So I'm going to receive that as an argument called is signed in
next inside this function.
We no longer want to have any component level state that is keeping track of whether or not the user
is signed in.
So I'm going to remove the entire set state call and I'll replace it with an if statement.
So I'll say if is signed in is equal to true and we want to call our action creator this Propst not
sign in otherwise.
So L's case will say this stock props that sign out like so and that's pretty much it right there.
All right.
So let's flip back over your browser.
I want to very quickly just test out this code.
Now we're not going to see any impact or any change on here.
In fact we're not even see any updates the button any more because we are no longer updating the state
inside of our component.
Nonetheless I just want to make sure that we don't have any error messages or anything like that when
we change our authentication state.
So back inside the browser I will refresh the page and then attempt to sign an so I click that button
and then we don't see anything occur again that is totally fine if you have the sign out button up there
right now because you are signed.
Or if you sign up on because you are signed in.
You can click the sign out button.
And again you just don't want to see an error message.
That's all we're checking for right now.
Now I don't see any error message which means we are doing pretty well.
So we're going to take a quick pause right here in the next video we're going to start working on in
3DO sir.
That is going to record whether or not our user is signed in.
So quick break and I'll see you in just a minute.