Using Redux-Persist and AsyncStorage in React Native

to keep user logged in even after they exit the app

Ever since graduating from a coding boot camp, I’ve been working on projects to continue exploring different technologies and aspects of coding on my own to further my learning. My most recent project was a very simple but possibly entertaining phone game built using React Native.

Text Warrior main page

My goal for building this app was to be able to setup the environment for building phone apps, get a better idea of using navigation, components and props in React Native, and to practice using Hooks. I did end up learning about all of these things, but I was most intrigued when learning and implementing redux-persist with AsyncStorage to persist login and to store login information.

I want to give a brief overview of redux-persist and AsyncStorage separately and will show you how the two were used in combination and also AsyncStorage individually afterwards.

I’ll start with redux-persist, which is a very straightforward npm package. I basically followed the documentation by creating a file called Store.js in my folder with all the redux related files and then importing persistStore and persistReducer from redux-persist. We can ignore the AsyncStorage part for now, but if you’re using it for a web application, you can follow the example on the package website that uses localStorage as default.

Store.js

The user login/logout function is connected through the rootReducer which has the user reducer file imported, which then has the user actions file imported.

rootReducer.js

The next step is to wrap the root component with PersistGate if using React or React Native. According to the package documentation, the way this works is that it “delays the rendering of your app’s UI until your persisted state has been retrieved and saved to redux”.

App.js

If you look at the PersistGate component on line 17, there is a prop called loading. This prop can be null or any react instance, so I put in it my default app loading component.

Next is AsyncStorage. According to the React Native documentation, AsyncStorage is basically used instead of LocalStorage.

AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app.

React logo with storage icon

I found through this documentation of redux-persist, I found out that with the v6 update of React Native, AsyncStorage has to be explicitly passed as the storage engine. Importing AsyncStorage from ‘@react-native-community/async-storage’ and then passing it as the engine is pretty much all that was needed for this part of the project. The user is remembered even after closing the app and opening again and only logs out when the Logout button is pressed.

Remembers username until logged out

I really wanted to explore AsyncStorage a bit more and found the perfect way to do it. I originally didn’t have a functionality to see the best score in my game. So, I decided to use AsyncStorage without redux to just log the highest score for the player’s current session. To achieve this, I got help from this website and also this one.

import AsyncStorage and create storage key

The first part was defining a variable called STORAGE_KEY which uses API functions to save and read the data.

You can think of this key as the identifier to the value that is being stored, hence the key-value storage system.

Next, I used the code provided in the AsyncStorage documentation for saving and reading data. Similar to LocalStorage, saving the data uses the function setItem with the first argument being the key and then the second being the information that needs to be stored.

saving and reading data using AsyncStorage

Reading the data is similar but uses the function getItem and then uses STORAGE_KEY to find the right information. Then I wrote some code that sets the best score to the newest score if it is higher than the highest score stored in the storage. If the newest score is lower, it still renders the current high score.

calling the saveData and readData functions when timer stops

The saveData and readData functions are called when the timer gets to 0 and clears out with clearInterval.

Displays player’s current score and high score

That is pretty much it for persisting user login and storing user information and best score for current session. I can definitely improve and add to this app by persisting the high score information using redux, which I hope to do in the future. For now, I am planning on practicing CSS because I realized while working on this app that I don’t really know how to make things look pretty.

Thanks for reading!