We're now calling the appropriate action creator any time that our state changes according to the API
library in this video we're now going to start working on douceur that's going to record whether or
not the user is signed in at any given point in time.
Now remember the entire idea behind recording the authentication status inside of our redock store is
to make sure that the authentication status is available to other components were other screens inside
of application if we had stuck with the approach we have before where only the Google component knew
whether or not the user was signed in that it would be really challenging for other components to understand
whether or not they should treat the user as being signed in or signed out.
OK.
So are going to close down all the files I have open and then I'll open up my reducers directory and
inside there are going to make a new file called off reducer.
Yes.
And then inside of here we'll put together some boiler plate or a reducer.
So I'm going to have a function that gets called with some state objects.
Going to default this to be an object as opposed to just a boolean flag and also have some action property
and they might be curious why are we using a default value of a object as opposed to just like true
false or null.
Well in truth we're going to eventually have one other property related to authentication and you'll
see what that isn't just a little bit.
So in addition to having just some like true or false or no value to indicate whether or not the user
signed in we're going to have some other piece of data inside of here as well.
And the easiest way to arrange all this data is to make use of an object.
Now this object right here I expect to eventually have some property inside of it called something like
is signed in.
And we probably want to start off with that property be an asset to know.
So in order to default the argument of state in this case or in order to initialize it I'm actually
going to create a initialiser up here.
It's going to make a new variable called initial state and then inside if you're going to put the initial
value for my state object.
So I WANT IT TO HAVE A is signed in property and I wanted to be defaulted or initialized to No.
So now when we default the value state right here rather than assigning it a completely empty object
I'm going to assign it initial state.
Remember the idea here with the default argument when our redux application first boots up are reduced
or it gets called one time to initialize it.
If this producer gets called with a first argument value of undefined then state will be set equal to
whatever value we put right here.
So in order to get a initial value that has an object with the property inside of it of null I'm going
to just to find the object up here ahead of time and then set the default value right there.
Just you know I have a variable name here that is all capitalized to make sure that it's really clear
to other engineers that this is supposed to be a true constant object and we should never change any
of the values inside of it.
We usually indicate that by making use of this capitalized syntax so the capitalized syntax means do
not try to modify this object under any circumstance whatsoever.
OK so now inside of a producer we're going to add a switch over our action type and we'll have a case
of what was it.
Let's check our actions file we have a case of sign in and a case of sign out so sign in and a case
of sign out and I also put in my default case in which I will return my state object.
So now in the case of sign in I want to take my state object I want to update or modify a property inside
of it.
Remember anytime you want to modify a property we're going to use that spread syntax that dot dot dot.
So I going to create an entirely new object here.
I'm going to take all the values out of my state argument and put it into that new object and then I'm
going to also update the is signed in property as well.
And I'm going to update that to be true.
It's now it can do the same thing with sign out as well.
So I will return dot dot dot state is signed out and this case we are no longer signed in because we
just signed out.
So we're going to update is signed.
It's signed in to be false.
Like so OK.
That's pretty much it.
So I'm going to save this producer and then going to flip over to the reducers index file.
I will import that reduce or at the top.
So Auth. reducer from author reducer and then I'm going to assign that to a key on my state object of
art reducer.
So
all right so this looks pretty good.
Now once again I'm going to flip on over to my browser and just do a quick refresh try clicking the
button and make sure I don't see any error message or anything like that.
So looks pretty good to me.
So let's take a quick pause right here.
The last thing we're going to do is kind of close the loop here so to speak.
So we're now recording our authentication status inside of a redux store where we need to make sure
that our Google component either shows the sign in or sign out button depending upon whether or not
these are signed in.
The last thing we do is communicate that state back over to the Google off component.
So quick break and I'll see you in just a minute.