My React Native app uses a flatList to display an array of information. I am currently programming the pull to refresh method that the flatList component supports however I would like to know if there is any standard practice that allows me to first check if there has been any modification in the database since my last refresh and only if there has been then I would do a new request to fetch the info. I am afraid that if I don't have these kind of checking, the user will make a lot of useless requests and spend unnecessary data.
Related
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 am currently working on an asset manager for network/server infrastructure in vue.js.
I am also using vuetify for the look and feel since the goal is to create a progressive web app. Engineers can use their phone to scan tags on company assets to request details.
Currently all data is loaded into the app using a rest api. I am using vuex for state management in the application.
I would like some insights in to when to launch these api requests.
So there is some data i currently load at the start of the web app just after logging in when the main core view is loaded. This is impacting performance. Some examples of loaded data:
-> asset types,vendors,suppliers,...
This data is used in a lot of places in the application. (forms,filters,...)
I prefer not to call the vuex actions to perform the api request form inside a specific component since this could lead to unnecessary request when browsing the app.
The only exception to this being the assets them self since this is a lot of data to load at the start.
The problem i am facing is that on mobile platforms loading the data each time at the start of the app is a waste of data connection. It is possible that the engineer is using the app without actually needing the data.
I know this is kind of an abstract question, i am not looking for the one final awnser. Just some insight or recommendations from the community.
Correct me if I misunderstood but it sounds like you are prefetching a lot of non critical information all at start up. You should really focus on when that data is actually needed and reach out and retrieve it only when its actually needed. A common case of this is on route change, so if you have multiple pages within your app an admin page is likely going to need data that your home screen doesn't need. Wait until you navigate to that page before you retrieve information specific to that page. This is commonly done within the beforeRouteEnter router hook or created life cycle hook. Now to build on this, it may take some time to download that new data after a route change - the page could render before all of its necessary data has been made available. You can use a library like Vue-Promised to handle that intermediate state for sections that require data that is still loading. This allows you to let the page render quickly without having to wait on all of its data.
A couple other tips to further optimize things:
If you data that doesn't change often, sometimes it doesn't hurt to persist that data within the browser, either using the Cache-Control http header when making your http calls or by using something like the browsers LocalStorage or one of the hard persistence methods available within the browser. Theres a number of Vuex plugins that make this really easy, ex. vuex-persist. On startup you can load this data from storage which is faster than making a network call, your app will be able to respond faster and you can even go and make that network request in the background to refresh that data after the page has rendered.
If retrieving large sets of data is an issue then you can page the data to retrieve it in smaller chunks and only retrieve additional "pages" fo data when the user needs it. In tables this is commonly done using pagination buttons or infinite scrolling. Theres a number of libraries that do both of these as well, pagination would likely be built into the vuetify libraries table component.
I want to create a real-time application ( for e.g. a stock market app) in react native.
Currently I don't know any other way other than to use setInterval(), I am fetching data from a third party API.
So is there any way or third party tool available which gives real time data without using setInterval from a REST source?
This link can help you -> https://medium.freecodecamp.org/how-to-build-a-real-time-todo-app-with-react-native-19a1ce15b0b3
Streaming Data Updates
You might have noticed that the todos are displaying fine, except you’re unable to view updated todos without refreshing the app. In this final step, we’re going to fit that missing part of the puzzle.
In the previous section, we added an onAllData method for the ReactiveList component. The second parameter of onAllData receives streaming updates which we’re going to utilize to always keep the todos updated. Here’s how the updated onAllData method will look like in components/TodosContainer.js.
Answer to my problem is the below post.
https://medium.com/#gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795
I'm new to react-native. I have a journaling app that, to date, has been a web app built in rails.
A user has many journal entries.
When they login to the app, I want to pull all of their previous entries and display it to them. My question is this:
when they login and I pull all of their past entries, where do I store it?
If I store it in local storage on the phone, my concern is that some users have thousands of entries and I'm not sure if that's the appropriate thing to do.
Any thoughts?
Do you really need the data to persist? You can pull the data only each time they need it instead, an effective way of doing this for thousands of records is to implement lazy loading AKA "infinite scrolling". This allows you to pull a defined number of records when they are needed and then load more when the user scrolls beyond the records that are provided initially.
There's an article Implementing an Infinite Scroll In React Native, which walks you through an example of how to do just that
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 :)