How to Store User Login Data With React Native Async Storage

Or the data that we have collected so far in the app, like the recent search terms, the card, everything is in memory. And as soon as we would refresh the app, we would lose that information. We don't have the card anymore. The recent searches are there because we have it hard coded over here. But let's say that we wanted to store this and we wanted to get back the card information, the recent searches information. And I would ideally want to store this information in the persistent storage. So that is when the user kills and comes back to the app, we are able to retrieve that information and show it to the user. And this can also include the user token. So we'll also be able to continue the user session from there. This is where async storage comes in. Using storage is a persistent key value store, it's a very simple format. What it does is it stores the data in the app on iOS and Android and it basically takes a key for the value that we want to store. And the value is any string that we want to store. Generally, what we do is we take a JSON and we stringify it and store it and then pull it back into the application state when the app relaunches or whenever we want to. Using this is quite simple. We install the async storage library from the React Native community. This was a part of the core React Native. But since the Lean Core initiative by React Native team, they have started moving out a lot of these optional dependencies. It is not absolutely required to have async storage. It's based on the use case. So that way it is great and it keeps the core React Native as light as possible . So we'll just add this async storage library to our application and then just we just need to do a part install for iOS and from there, it's pretty simple. So let's do that. Let's open the package.json and we would want this independently. Okay, we have it installed. Let's go to the iOS directory and do pod install. Let me come back when this is done. So it installed React Native asian storage. We'll just start the Metro bundler again. And what we'll do is we'll go to the core services and like we implemented the API service, we'll implement the storage service over here. It's a part of the core service. So that will abstract out the implementation from the rest of the application. Let's start doing that. const storage export default storage. And if you look at the async storage API, it provides a lot of methods like get item, let item, merge, remove items. What we'll do is we'll implement get item and set item and the rest of these are best based on the use cases. So let the get and we need a key that we want to get the data for. So let's go to the core and storage from React Native asian storage. And we'll write this in try catch block. Return this to get item. And we need to pass them key to it. For error block, let's log it to a congun for now. Once we have a network where a dashboard set of like century, we're going to look in on the upcoming lessons, we can push it to that too. So we'll say async storage get field. It's also long to keep. First we error. Next is also implement the set. Before we can get a key we need to set it. We pass the value, which will be of type any between any JSON object. It doesn't let me to have a particular structure. So we'll say async storage dot set item and what this teach is a key and a value as a string. So we'll convert that JSON to a string and handle that over here. So the app is still passing an object. They set field for key. So that's it. Let's now go ahead and use it. So what we can do is we can either save the card that we want. So we have a thumb for that for saving the card or we can save the recent surgeon. Because once we kill the application, we'll use these searches. So let's go to our home page. And we're doing an add to cart over here. So right here, we're from the SQL and calling this add item to cart from thumb go to our thumb and save this card to persistent storage also. So let's do that. Let's go to the phone for saving the scar, which is this one. So right here, we're saving it to the cart after this. Let's get the card, which is this and then also saving to Ethan's stories. So we're going to take for students, so from services slash, or slash, storage and call it just storage also, so it's a storage, the storage dot set and we fast the key. So let's lay a key for that. We use a hardware value. So we'll go to content and we'll say. Key card, let's cut. So in for the config, the code config from the feed at the config from services slash config. And we'll say config.keys.card and we also need to pass the venue. So the store is the card state. So we'll say store. Keep them and now when we add items to cart, it will also say it to the stores. And there's no direct way to see what data is stored into the Asian storage, although there's a tool that's called react to Tron. Clear allows me to see the network call and also what's inside the storage, but all and we can use that. What we'll do is also application launches. We get the item back and console it so that we can also see it. So let's do that. We do the app come this fast V launch and as it launches, we get the item from the card. So we'll say storage.get and we pass the key. Config.keys.card save it and it returns up from it. So we do const. Card. Wait and push it to the application card, but let on add item to card, but we 'll do that. But before that, let's console that for now. For this error because we added Asian storage and this is not pure JavaScript library. There's also some need code that library elements. So what we need to do is we need to build the application and launch it again. So I just do that. So I'll sneak yarn, I will and I'll get back to the point where this goes to application. So the win took some time, but we're back and it features three rounds the app and we look at the value of the console. Clicking this also open map. Start the app. And as we can see, the card is coming in. It's not because there's nothing in there right now. So let's go ahead and click that add to card button on the phone piece and soon it's add to the card and then we'll try and check the launching the app. So we'll say, and since we are now saving this for the, which is Asian stories, now add to our card button, we should have that. So we'll go back to our app and re-launch it. And now if we look at the console. We have that card. So as we saw, we kill the app and then content, we get the card back. So next what we need to do is we need to set it back to our application state. The one way to do that would be we dispatch the same actual, but this actual is defined for only one item and and using that my mess with an antique next city also have some analytics written over it that fires a particular pixel on listening to the active card action. So that will also get fired. So let's do that. What we'll do is we'll write a separate action for it that says add items to card and that will say initiate card. And then we know that this is the way that the action that happened in the, the application. So we'll fail. In it cars, this is for that and I just go and add this action. So we'll say unit card. And we'll see that and we'll go to reducer. And we'll add an individual. And what we can do is we don't have any items when the application launches in the application state in the now, so what do is that action for data to end and we 'll see if that. So we also need to add data to this, which is for beer and it will be a type. Card state, which is area of card item and see it that and now all you do is we need to go back to our thumb and this past data. This pants and we will say, we need for the card schemes. So we'll say item and then card. So the error is if we need to fast and item array and what we're doing is the first thing because it returns a string. What we could do is before running the value, we can pass this as G1 and give it back. That you can say, what we can do is if we have something in value, we can say return. Instant but fast, when you are, will definitely turn. That and now tank cost this and any of our card item, which is what our card state is. So let's say that and now when we check the state, let's restart the app and let's come in. We already have an item. So click it. Let's go back to the next one. So let's go back to the next one. And let's restart there. And once we continue, we'll have the two items that we added to card. There you have it. So let's see for my engine look is the badge on the card was said. This was not happened when we did that from the launch screen and I'll explain that in one second. So let's just relaunch that. So now our card will be persisting. Now about updating this bank, we card from our recent storage on the splash screen. And then that's also where we set the state where it's available. But this tab navigation is not available on the splash screen. It happens only after that. If we go back to the navigator, we'll see that that once we continue from our splash we get the tab navigation. So what we need to do is when we set that navigation, we need to get this where we need to get the value from the store and set the value of the batch. So let's do that. We'll go to navigator, then we get the store and set this value for not for settings but for card over here. So we go to the top and we'll import store and port, store from, share, store. Let's go to cart icon. So, and store dot, date, dot card, dot items, dot meant. And say that now once the app is selected, it will fetch the data from the store and set that to state and when the tab navigation is shown, we could also fill the bad for the card item. So let's re-wrote the app and see that. Okay, we need to make this as a string. The batch does not accept numbers. We used to. Now that we go to the tab navigation, we'd also have the bad with the number of items in the car. So next, what we can do is you can also save these instance searches. This is right now, far-quoted into the search, but we can save this to 18 students and I leave this up to the students to implement. So what we've done is we can't implement the get and the set for our async storage. We can also implement other methods that are required for to have mostly the move or the remove all methods in the required so that we can clear the car. In some cases, when we are locking our danger, so we won't clear the storage for that token and also for other things that we can have stored for the particular user. So that is useful. The other thing is that we can do a little bit of this. We can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. So we can do a little bit of this. And if the application does some kind of a login, we also talk about fetching that user token and validating the user token. So there's quite a few things that's going on here and having something like this inside the new turnprint sense. And it also clutches that you with a lot of business logic that's not required. So these middleware are really, really fantastic. And you can also control the order right here. So if you want to validate the user and then fetch the card, we can also do that. So that's all for this module. And I'll see you in the next one.