How to use Redux with AsyncStorage

First of all, may you’re wondering why should you or anyone use the Redux with AsyncStorage. Is easier to use the Redux with AsyncStorage and you can just worry about the Redux and his state will persist normally, which means the user can close his phone and the state still will be saved, I’ll show you.

However, what is Redux? The Redux is a predictable state container for JavaScript apps. Commonly the Redux and React are using together because React commonly are using, manipulating, passing to another component a lot of states and it could be a little hard to manipulate and maintain.

We’ll use the React native with the Expo.

1. We’ll start the expo template with Typescript

npx expo init -t expo-template-blank-typescript reduxWithReact

Your repository must look like:

We’ll create a folder called src and inside that an index.tsx file and a folder called store now it’ll look like:

The App.tsx should look like:

Now we’ll install some dependencies to use the Redux and the persistor to through it use the AsyncStorage with the Redux.

yarn add react-redux @types/react-redux redux redux-persist reduxsauce seamless-immutable @types/seamless-immutable @react-native-async-storage/async-storage redux-saga reactotron-react-native reactotron-redux reactotron-redux-saga

You need to make some files to your repository seems like:

config/ReactotronConfig.ts: here is the reactoton configuração that we’ll talk about it in another article.

store: The store is the folder where we put all the Redux folder.

modules: Here we’ll put all the redux modules as the auth which will store and manipulate all the auth states.

I’ll explain each file later.

The is an application that we use to know the redux states and in the ReactotronConfig must be:

In the creatStore.ts we’ll make the functions that will create our store. Putting each thing in a separate file helps to maintain our project more organized.

The persistReducers.ts is the file that makes our states persist, which means after the user closes the application the states will still persist which means being saved on the user’s cellphone. The persistentReducer needs some parameters as the key that we should put the name of our application, the React will use that name to find our states saved on the user’s cellphone, be careful if you change the key anytime the React won’t find the older states. The storage is what will be used to save the state since we’re using the React native we have to use the AsyncStorage to store and maintain our states using it, we can just worried about the redux as we’ve done on the React js and manipulate every state with no worries, at least we have the blacklist here we can put all module that we don’t wanna save, every module you put there won’t be saved, pay attention the name should have the save module’s name that is on the rootReducer.

The modules/auth/ducks.ts is our auth module, here we can put all states we want to save on our auth module. Here we’re using the duck's pattern, just to be clear. I won’t go deeper on that because there will be an article about the duck’s pattern.

Now we can configure the rootReducer and as in the example import the auth, we have to import all the modules one by one.

Now we can configure and make the penult step to make the Redux works properly store/index.ts should seem.

At least we can just change our src/index.tsx and have to seem as

Conclusion

Now you can use the application and make the dispatch normally and manipulate the Redux’s states and it’ll persist normally.