4

At first, my RN app was using only AsyncStorage to store my authentication parameters for a user.

Lately, i've decided to integrate redux to this app so i can have a global storage, robust code structure and clean unit test.

So i did implement Redux & Redux-thunk. It worked fine, but i've noticed something that intrigued me. When i'm refreshing my app, i've noticed my redux state was not persisted.

I was losing my authentication credentials. In production, that would probably means my user would have to log in everytime he closes my app.

So i had to implement redux-persist using AsyncStorage.

My question is : Why do i need to implement redux-persist in my react-native app when AsyncStorage is already, by definition,

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

?

Thanks for your explanation

Louis Lecocq
  • 1,764
  • 3
  • 17
  • 38
  • Have a look at this [answer](https://stackoverflow.com/questions/49222396/why-use-redux-persist-over-manually-persisting-state-to-localstorage/49490716#49490716) to which I've highlighted some key points – Pritish Vaidya Nov 08 '18 at 16:52

2 Answers2

10

  1. Redux provides you with a methodology to pass around some data (state) within your app. In other words, you can use a consistent data flow (actions, action creators and reducers) to share data between the different components of your app.

  2. This data (state) is stored in memory. It is accessible as long as your app is running. If the app is closed, you lose it.

  3. AsyncStorage saves data into LocalStorage. When the app is started again, you can retrieve the saved data from there to provide the user with access to whatever state the app was in before the app was closed.

  4. There is no dependency between Redux and AsyncStorage. Not all data (state), which Redux manages, need to be saved by AsyncStorage. Not all data, which is saved by AsyncStorage, need to be managed (before saving it) by Redux.

  5. Redux and AsyncStorage are completely 2 different tools, which have different purposes. They can be used together or separately.

  6. Redux-persist is a tool, which uses AsyncStorage to store the "state" (or a part of it), which Redux manages. If you don't need to save this "state" between application's sessions, you can use AsyncStorage to save only what you need, e.g. only the user login token.

Bilal Abdeen
  • 1,627
  • 1
  • 19
  • 41
1

According to the docs:

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

Redux-persist is that abstraction that goes on top of AsyncStorage. It provides a better way to store and retrieve more complex data (e.g. redux-persist has persistReducer(), persistStore()). Also, AsyncStorage is by definition just a storage engine. Redux-persist implements these useful aforementioned functions on top of whatever storage engine you choose (https://github.com/rt2zz/redux-persist#storage-engines); it doesn't necessarily have to be used with AsyncStorage.

this.Chris
  • 11
  • 1