All right.
So in this video we're going to make use of acing storage to store the token when we get back from our
API.
So back inside my code editor I'll find the author context J.S. file and at the very top I'm going to
import async storage from React Native like so.
So as I was just mentioning in the last video if it's now at some points in the future when the other
library is compatible with Expo.
All we have to change is that import statement right there we're just gonna change this import statement
change where we are pulling in the library from.
And that's pretty much it.
So now we can make use of async storage to set our token and make sure that we store it from our sign
up action right here.
So inside of sign up right after we get the response from our API remember response dot data is an object
that has a token property in it's that token that we want to store inside of async storage.
So I'm going to remove that console log in I'll instead call a wait async storage dot set item and I'm
going to set a property in there called token.
And as you would guess we're going to throw in their response dot data dot token.
And that's pretty much it.
It's now if we ever want to get the token out of storage we would write out a wait async storage dot
get item token and that'll give us our token back immediately.
So we don't need to get the token back right now.
So he's gonna remove that line.
Just a quick example that looks good.
We'll eventually retrieve that token when we want to try to automatically log our user back in when
they restart the application.
But we're gonna handle that in just a little bit.
So instead right now let's continue with our flow.
The next thing we want to do is dispatch an action to take that token and put it into our state object.
So once again down at the very bottom of the file we've got our initial state value right there.
And we had said that storing some boolean like is signed in is not super useful.
Instead we're gonna have a property inside there called token and we will default it to be No.
So by default a user is not logged in because we don't have a token as soon as a token is present inside
of here.
Specifically the Jason Webb token we get back to the API.
We're gonna take that as a signal that the user must be logged in.
So essentially the presence of a token property means logged in.
No token not logged in let's make sure that once we get our token after we set it inside of storage
will then dispatch an action that's going to update that token piece of state.
So I'm going to dispatch a new action.
I'll give it a type of.
How about sign up.
And as the payload.
I'll just throw in response dot data dot token.
So now inside of our reducer at the top of the file we can handle another case or throw in another case
to handle that type so at the very top right after add air I'll throw in a new case of sign up and inside
of here I will return dot dot dot state with token of action dot payload like so then there's probably
one other thing we might do inside of here.
Let's imagine a case where a user tries to sign up and maybe they put in some invalid email and we end
up showing an error message to them.
So our error message piece of state would be defined as some error message when a user then signs up.
We probably don't want to have an error message anymore.
Now of course we probably won't be showing the user the form that would display the error message.
Nonetheless if the user then logged out of our application and went back to that sign up form they would
still see an error message.
So in other words I think that when a user signs up we really just need to essentially reset our entire
state object and say OK we've signed up.
So here's the token and we should no longer have an error message.
So we don't really need to persist or carry through any values from the current state object.
We really just want to completely rebuild the state object from scratch.
So when a user signs up I'm going to zero out my error message.
So I'll say error message is empty string and I'll set my token and that's it.
That's now my entire new state object OK so this looks pretty good.
The last thing I have to do is handle some of them are navigation.
I mean let's take a look at our diagram.
So now we need to make sure that we just navigate our user over to the main flow.
We'll take care of that in just a moment but before we do I want to make one quick change to our sign
up action right here at present.
It's starting to accumulate a lot of code and it's kind of hard to read.
So one thing that we could do to make this a little bit more easily legible is use some compacted syntax
for the outer function right here does a quick reminder of how IRO functions work I'm going to do a
quick example on Arrow functions remember if we have a function called like ADD and it's an arrow function
maybe this thing gets called With A and B that are numbers and we would return a plus b if it really
was supposed to add.
So this is a one way that we could write out an arrow function another way that we could write out the
zero function because we have a single javascript expression right here.
Just like one single expression we could decide to remove those curly braces and remove the return statement
as well.
So that's making use of something called an implicit return.
It means that the result of a and b will be automatically returned and we don't have to put in a return
statement.
So we can either write out curly braces with return or because we have one single expression inside
of here.
We can write out just the expression by itself and that expression or the result of it will be returned
for us to write a very similar scenario right now with our action function.
We've got dispatch right here and then we are returning one single thing So alternatively if we want
to write out this big long like kind of extra curly brace right here with return we could decide on
the outer function to remove the curly braces.
So one right there and one down here removed the return statement and then put that function declaration
on the same line as dispatch like so.
So what you see right here is 100 percent equivalent what we had before but now we don't have to have
that extra line of indentation and the extra return statement and all that stuff as well.
So it's a lot easier to read and see what's going on.
So we're going to follow this pattern for all the different action functions that we write from here
on out.
OK.
So this looks a lot better.
So let's take another pause right here.
Like I said the last thing you do is handled navigating the user over to our main flow.
So let's take care of that in the next video.