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
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!
As the question suggests, I'm trying to figure out how to persist cached data beyond a phone reboot or app closure using React Native with Redux Toolkit Query. I've noticed that the cached data gets wiped in those scenarios. I believe that caching data beyond an app closure or phone reboot is a common practice.
I have thought about simply storing the data in client-side Redux using Redux Persist to get around this issue, without persisting the api slice. As this post indicates, persisting the api slice is a bad idea:
What happens when i use RTK Query with redux-persist?.
Any tips on this would be appreciated! Thank you.
Generally I can only repeat what I already said in the other issue:
I do not recommend doing this. Data from a server should be fresh, and this way it defitely won't be.
That said, we are currently working on SSR integration and that, too, will need similar functionality. So some kind of rehydration mechanism will be integrated, probably in Redux Toolkit 1.7 - but until then you have the choice between not keeping api data cached (again, my recommendation. No user wants to open an app and see data from five weeks ago - rather show them a loading screen!) or restoring it, but potentially ruining cache collection of said data.
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.
I have been using Firebase Web SDK for my react-native app (I am using FIRESTORE to store the data). Up to this point, I have had no problems. It all works smoothly. But now I want to add some kind of offline storage mechanism to my app so that I could still offer some functionality or display some content that was cached from the last connected session even if my users are offline. After some investigation, I have the impression that react-native-firebase is the preferred way to go. Now I have some questions and I like to get some advice from the experienced.
Is react-native-firebase the only option to go? I have quickly read about AsyncStorage and it is just a key-value storage. Considering the simplest thing I want to do is page through a list of firestore documents, this kind of storage seems not to be suitable to do this offline. Like If I wanted to do this with AsyncStorage I would have to put all the content (maybe hundreds of documents) I get from the firestore backend, persist them as a single string value, fetch them back, parse them, page them etc. And write custom logic& methods for all these.
If I was to use react-native-firebase, just enabling the offline storage -I assume- takes care of this for you and you don't have to write any custom logic for offline storage usage. I assume the data that has persisted for offline usage has the same structure as it does in firestore database. I feel like If I use anything other than react-native-firebase, I would have to handle all the custom logic for persisting, reading and rendering the data offline myself. Is that right?
The biggest concern I have is the amount of code refactoring that might be required. I have many lines of code and so many .get().then() like lines where I get and render the data from firestore. In the documentation of react-native-firebase it says:
...aims to mirror the official Firebase Web SDK as closely as
possible.
I am not sure to what extent this is true. I have checked the react-native-firebase's firestore module's reference documentation but I just can't tell how many of these querying methods are actually supported.
So, the way to go is react-native-firebase's way? Would it take a heavy toll on me trying to refactor the existing code? Any similar experience do you have?
I would appreciate any help.
Thanks a lot...
Maintainer of the react-native-firebase library here.
...aims to mirror the official Firebase Web SDK as closely as possible.
This is a minor disclaimer as there are some differences between the two, mainly down to how certain things have to be implemented with React Native.
For example, enablePersistence does not exist on RNFB. Instead, persistence is enabled by default and can be toggled off (or on) via settings().
Is react-native-firebase the only option to go? I have quickly read about AsyncStorage and it is just a key-value storage. Considering the simplest thing I want to do is page through a list of firestore documents, this kind of storage seems not to be suitable to do this offline. Like If I wanted to do this with AsyncStorage I would have to put all the content (maybe hundreds of documents) I get from the firestore backend, persist them as a single string value, fetch them back, parse them, page them etc. And write custom logic& methods for all these.
This is technically possible, however there are downsides to this as you have mentioned. With Firestore, when the device goes offline (quite common on apps) and you attempt a read/write it'll read/update your local cache, which will still trigger event listeners. When the app goes back online, it'll automatically re-sync with the server for you.
If I was to use react-native-firebase, just enabling the offline storage -I assume- takes care of this for you and you don't have to write any custom logic for offline storage usage. I assume the data that has persisted for offline usage has the same structure as it does in firestore database. I feel like If I use anything other than react-native-firebase, I would have to handle all the custom logic for persisting, reading and rendering the data offline myself. Is that right?
This is all handled for you. We wrap around the native Firebase SDKs so expect the same level of consistency if you were developing a native Android/iOS app if not using React Native.
The biggest concern I have is the amount of code refactoring that might be required. I have many lines of code and so many .get().then() like lines where I get and render the data from firestore.
Generally everything is the same apart from a few minor methods for reasons mentioned above.
So, the way to go is react-native-firebase's way? Would it take a heavy toll on me trying to refactor the existing code? Any similar experience do you have? I would appreciate any help.
I'd recommend anyone developing with React Native & Firebase to use RNFB. It provides a lot of extra functionality the Web SDK cannot provide with React Native. Apart from a more cumbersome setup & changing imports, it should work very much the same.
I have a use case for synchronous storage for my react native app.
Before app renders a home view, I want to check if there is a session token stored on the local storage and proceed if it is available, otherwise want to render login component instead as the initial view.
Using sync storage will simplify the code.
I don't think there is a simple synchronous storage option. According to this answer localstorage is not implemented in the core IOS javascript engine. AFAIK the other options such as those used in this localstorage polyfill don't work. That leaves us with needing a react native module which are asynchonous by design. From the docs:
React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events
So I think Async is the way to go.
For those who are searching for this,
I found this npm package that served this need
react-native-sync-localstorage
I have a similar situation and found Realm supports synchronous read, which is what I need. Realm is a bit big for single token storage. I use AsyncStorage for everything else. Let me know if you find a simpler solution.
There's no solution similar with Native Mobile development such as SharedPreferences in Android.
Native Way: most of the operations are synced. (such as read from storage, etc), some of the operations are async.(http request, load image)
React Native way: almost all of the operations are asynced. this is explained by #Ryan Harmuth 's answer.
So, let's start to use Redux as a solution. :)