We've now got a producer put together and we need to make sure that we get that off piece of states
back into our Google component.
Now remember this is the part of this retractor or introducing redux that gets to be a little bit kind
of awkward or confusing.
We already had our Google off component wired up to have component level state inside of it.
And so the component itself knew whether or not the user was signed in.
So we've now Accenture essentially extracted that information to a redux store.
And so now we need to pipe that information back into the component that was already containing that
data.
And so I know it feels a little bit awkward to do this but this is the correct way to do it.
So I'm going to open up my components directory and find that Google file and inside of here we're going
to go down to the very bottom and add in a map state to prop's function so right above my export default
statement.
I'll put in Konst map state to prop's So that will be called it's my state object.
And then inside if you're going to return an object with a property is signed in that's going to have
state DOT DOT is signed in like so
it's now the value of is signed in is going to be either Null true or false just as the state value
of is signed in.
Inside of your Was value added value of before.
So now we're going to go through this component and do a pretty good refactor to update.
Yeah a couple of different things inside of your.
And make sure that we're not making use of component level state anymore.
So first off inside of my class at the very top on which removed the state initialization.
Next up inside the then statement right here.
I need to make sure where we need to make sure that we dispatch some initial action when we finish initializing
our library to indicate whether or not the user is actually signed in.
Right now we are immediately calling set state.
So essentially we want to call either sign in or sign out depending upon whether or not the user is
signed in now to do so.
We could either write out some if statement like this right here inside that door then what.
Another way that we could write this to reuse a little bit of code is to just call on or change directly
with whether or not the user is signed in.
So we can call on all change will pass and whether or not the user signed in.
And then this function is going to call the appropriate action creator member.
This is all code that is going to be running at initialization.
So right when this library first boots up.
All right so we went to remove the set state and I'm going to instead call this start on off change
and I'm going to pass in the users current authentication status so I'll say this spot on we're going
to stuff off.
Dot is signed in Dot get like so.
So now when we finished initializing our library we're going to assign the author instance to this start
off well then immediately update our state inside of our redux store and then we will basically sit
around and wait for that authentication status to change at some point in the future.
All right cool so I think there's probably just one other thing we have to change.
So down inside of render off button we are currently looking at state is signed in.
So we no longer have a state object inside of here.
So rather than referencing state we're just going update that to process because that is where the is
signed in property is now going to be coming from.
So a data inside the if statement I'll update it in the is it else.
If right here so this stop Propst is signed in.
And I think that's about it.
Inside this file I can do one quick search and search for state and make sure I don't have any other
references to state besides inside the map stage props function.
Ok I think I'm good to go.
So I'm going to save this and we'll flip on over to our browser and do a test.
All right.
So I want you to know that as you go to this test right here is entirely possible that we might have
made a typo or a mistake at some point.
So if you see any error message I would highly encourage you to take a look at the error message you
got and try to figure out exactly you know what is going wrong here.
Now I'm already getting a warning message right here.
A classic mistake that I personally make all the time.
I define that state to props at the bottom of the file and I never actually passed it into K'NEX so
I'll make sure that I do that right now.
Like so OK it's now going to flip back over.
And now I should be able to click on the sign in button I'll see the pop up appear.
That's good.
I'll select an account.
And then I see the button flip back over to sign out.
Now I can refresh the page.
I still see it say sign out and when it doesn't say sign out when the page is first initialising I don't
see any button there at all which is definitely good.
Now Asheville The click on sign out and it's going to go back to sign in with Google.
Now Asheville to refresh again and still sees sign it with Google.
All right that's it looks perfect to me.
So again if you saw anything that didn't not quite go correct here that's totally fine.
First off check to see if you have any error messages.
The other thing that might be going wrong is something that we're going to talk about in this next video.
So if it feels like you are clicking that button but nothing is actually happening then what's the next
video.
Because we're going to go over a little refactor to our reducer that might fix an issue that you have.
So quick pause and we'll take a look at some little retractor that we're going to do in the next video.