I have a stupid question but I'm super confused from it. If React Native has Async Storage available, why should one use Redux and Redux Thunk? Why can't we just save all the data in the Async Storage? What is the purpose/benefit of using Redux over Async Storage?
They are different things and serve different purposes.
Async Storage is a simple key/value store. It only works with strings. So you can do, AsyncStorage.set("someKey", "someValue") That's all it does. It's purpose is to save/persist data on the file system of the phone so that it can be used over multiple app sessions (closing and opening the app)
Redux is a full state management solution that allows you to keep any kind of javascript data in memory during the running of the app and have it available anywhere in the app. Think about how in a react-native app two different components cannot easily see and modify each others state, there has to be some way for them to communicate. Basically, Redux helps you do this.
Considering your level of understanding, I would recommend looking into React Context before you tackle Redux. It is a significantly simpler state management solution than Redux. It is included with React/doesn't require a different code structure and will also help you understand the purpose of Redux.
Redux and Async Storage is 2 different concept. To be clear, Redux is the state management and Async storage is like an client database. If you are familiar web development, I can say that Redux is like session storage and async storage is local storage.
It means that Redux is storing the state of app at the time you using it, when the app is killed, all the state in Redux will be deleted. In contrast, async storage store the app' state even if the app is killed.
Therefore, there are a combination of this two. Example: When user first time login to the app, we will store the user info in the async storage so from the next time, user will not be required to login again.
Related
I want to build an app where users can jointly work on lists. The app should be avialable offline and sync changes when it goes online again.
For the app iteself, I've decided to go with Ionic Vue. For storage, I created a Firestore and was able to sync between my app and Firestore by using the Firesotre method onSnapshot() (doc). Although this working at the moment, the resulting code does not look very elegant and I have to create multiple very similar Firebase calls in different components. This slows the app down and (I think) also prevents me from making the lists available offline and sync them again when there is a connection.
I recently discovered vuex and the idea sounds quite fitting for my case: I store all app data in the vuex store and sync it (both ways) to Firestore. My components access the vuex store instead of the Firestore directly. Here are some questions regarding this idea:
Is this in general how the vuex store and Firestore are supposed to be used?
Can I make the vuex store data available on my phone and only sync it to the Firestore whenever there is a connection (to make the app available offline inlc. modifying data)?
If so, what is the easiest way to sync the vuex store to Firestore?
Regarding the syncing: I found Vuexfire, but it does not really work for me as expected - I guess this is because it is built on Vue 2 (as against Ionic which is built on Vue 3). I also found Vuex Easy Firestore, but I'm a bit reluctant to try new tools, as Vuexfire cost me several hours.
Thanks for reviewing my implementation ideas!
I am building a React Native app which requires calling AsyncStorage multiple times in different components.
For example a particular screen can only be opened in web if the user is logged in, which requires checking the local storage.
Callings AsyncStorage every time doesn’t seem like a good idea and might impact performance as the application grows.
Is implementing redux the best option or is there any other way?
Yes, if you rely on saving too many records. You can however optimize it by using redux persist or using in-memory cache.
A good read that helped understand optimization and performance of Async: https://medium.com/#Sendbird/extreme-optimization-of-asyncstorage-in-react-native-b2a1e0107b34
Could you please help me to understand this. I think this is a repeated question and I went with some links too. My Question is about React Native Mobile applications
I understood Async has data limit of 6 MB and stores data even you restart the application. My question here is how long the data persists at the backend. Can the data be stored lifelong until the app is uninstalled?
Or Can we set up some command that tells the ap to store maximum for 1 week and delete it later?
Or Can I set up 2 Hrs active only and delete it later.
Can you tell any reason to learn Redux persist? What feature does it have more than async storage.
Thanks a lot
Async Storage is just a storage mechanism to store any data in the form of <key: value> pair while redux-persist allows your reducer to fill automatically (more precisely rehydrate) whenever your app restarts.
Answering your first question, anything that is stored in the async storage will be stored until you delete it by calling the method removeItem which is provided by AsyncStorage itself or clear app data from the device settings or uninstall the application itself.
Answering your second question, If you want to maintain a session for the stored data then you have to do it programmatically. It can be easily implemented by using redux-persist manualPersist prop. Refer to this link,
https://github.com/rt2zz/redux-persist#persiststorestore-config-callback
Answering your third question, you can use Async Storage along with redux to store the data of your reducers. You can also use other storage mechanisms in redux-persist. Refer to this link,
https://github.com/rt2zz/redux-persist#storage-engines
I am producing mobile app using react native, and after days of learning Redux, and react-redux.
I have a big question mark that:
What is the scenario of using Redux in react-native?
I studied many tutorials that told us how wonderful it manage the state, how simply it manage the actions.
BUT, is it just happening when you only have many components on one page in your app?
For example, if I have a app with 2 pages, so called Page A and Page B.
Does redux can maintain the state of A, then using at B? (I am using react-navigation of jumping among pages)
If it can do, what is the different of that I stored state to AsyStorage in A, then fetch it back on B?
Seriously confused.
Just need your discussion about it please, if I get thing wrongly.
THX!
Before getting into your problem statement let us first see why we should use these tools anyway?
For Handling App's Data:
State - It handles component's internal data with not much complexity.
Props - It tosses data back and forth from parent component to children and vice verse.
Redux - It handles data efficiently using action-reducer-store architecture. Great for a complex app with a lot of user's data to handle.
For Data Persistance:
AsyncStorage - Simple API to save and manage data on device manually.
Redux Persist - Built over Redux to store all the Redux State data to device synchronously.
Now getting back to your situation,
If you JUST have TWO screens to manage data back and forth on, it's better to use just state and props. You don't need anything else.
By calling AsyncStorage you are saving data on the device and then receiving it from the other screen. This is not necessary if you don't want your app's data to remain on the device even after closing the app.
I hope this helps :)
I want to know how and when the redux store gets cleared in a react native app. Does it get cleared when the app close? Does it get cleared when the user clear it from running apps? Or does it clear only when I uninstall the app?
Depends. Redux just creates an object (the store) which is kept alive as long as the JavaScript runs (that means, if you close the app, the store object will be deleted and all information lost). However, if you use a persistence layer on top of redux, say, redux-persist, your data will be stored in the persistant storage of the application, which gets cleared once you either uninstall the application or, in the Android case, also when you clear the application data.
All the state stored inside the redux store will be cleared when the App is removed from task manager(clear it from running app). When the app is uninstalled all the data related to the app gets cleared such as the local database, file system etc.
The flow goes like this user->trigger action->reducer takes the action, and previous state and update store->updated state stored in the redux store (only one big javascript object)->provider which makes store available to container->data goes to component->user can view data in the component. It's a unidirectional data flow.