I have a database that changes its values constantly and I'm creating an app that displays that information using React Native.
My question is: how should I store that data in the application and how should I update that information every few seconds?
In the database I have a single table with a single record that I would have to download from time to time. I want to access that data from different screens.
I've seen Context and AsyncStorage to store the data and use it globally but I don't know which one is better or how to use it well.
You can use redux, Context, react hooks and AsyncStorage also. But using AsyncStorage is not the best option to manage a store. It will slow your app and you can use AsyncStorage to save username, tokens, sessions etc. In my opinion, using react hooks is the best method to manage a store.
You can also use MobX for state management easy to understand and also reliable
Related
Hi iam new to react and been thinking about this for a while,
I want to make react application ,
how would you continue?
I want to fetch data and use it all across the app( best would be just one time when user logs in)
I was thinking about fetching it with redux, but there may be much better way which iam missing.
Thx all
If it is just one simple api request, then you are better of with using Context API. Just call the API with any network library such as fetch or axios, and keep data inside the Context. And use that Context in the whole App.
As the application's complexity grows and you need more functionality you can then use more sophisticated libraries such as Redux for managing state(keeping data at client app), calls to API will still be done with fetch or axios.
if you have small app better way you used contextApi and other wise you need to used redux is best way for state management
for redux you need to prefer below link
https://enappd.com/blog/redux-in-react-native-app/92/
for context APi :
https://blog.devgenius.io/react-native-state-management-with-context-api-61f63f5b099
Redux if your app is a SPA (single page application) since redux loses all state on page refresh
Persistent storage like localStorage or cookies until they expire. This method will survive page refreshes.
Store it in a database on the backend which will keep it until you literally delete it, but I imagine your use-case isn't in need of such a robust solution.
State management like redux is the best way to achieve your goal.
I'm working with a react app and currently working with a feature. The main task is showing some charts by getting data from API. And these charts will show the last 30 minutes' data.
I have questions,
In this situation, is it necessary to store these data in the state by Redux, though it can be handled at components very easily? And every time I refresh or request, I get new data (log base data).
When do we make the mind to store data in state and when not?
A redux store is a singleton, thus a single source of truth that can be made available to all components in the whole react application. If your state is intended only for one react component then you don't need a redux store. A useReducer react hook allows to well reproduce the redux pattern in a single component. Stick with a useReducer hook for a single component and use redux library for a store available to an app composed of several components.
Redux is not designed for the specif role of a special type of data.
You can use still store your temporary (30 min) data into redux, and use it to cross your feeling the same as the rest of your data.
But in this case, you might need to reset data after 30 minutes or invalidate your cache, keep your eye in react-query and RTK-query handling these types of actions more easily for you.
If data is being used for many states or those data are being used by many components then you should use redux. You can still go without redux, it is up to you after all.
If you have various components and routes then redux will help you to reduce the codes and also make the codes simpler.
Redux will give the one store for all the components in the project to store and access the data which is better then context or props tricks.
Also if you want to achive something like if user opened two different tabs. Let it be same page or two different pages of your website and if user done an action on page A and you want that page A or page B opened in another tab should get that update then redux can let you achieve that. Context and props passing are not useful in this case.
https://redux.js.org/faq/general#when-should-i-use-redux
Redux is most useful when in cases when:
You have large amounts of application state that are needed in many places in the app
The app state is updated frequently
The logic to update that state may be complex
The app has a medium or large-sized codebase, and might be worked on by many people
You need to see how that state is being updated over time
Is it fine to store information such as login as - guest, manager, staff , login id, or many more in Async storage to render UI according To to these value.
and when to use async and when to use redux. or if I manage our work with Async then Why I have to use redux. because as of now I do not know redux. so I am somehow manage my rendering By setting and getting values from async..
please help thanks.
Both are different things Async storage stores your data permanently until you uninstall the app while redux is useful for managing the state of your whole app and once you force close your app then redux will lost the state you have updated (You can persist the state with redux-persist along with AsyncStorage)
I will suggest use redux with redux-persist(Allow specific reducers to be persisted in AsyncStorage) so you can manage your state in better terms with ease of access by using selectors. Also with redux you can share data between your components/screens.
It will be hard to manage your json in Async Storage because you need to convert it to the string and also while fetching parse it which is burden.
You should also look at SecureStore, this is safe place to hold data like login/password/tokens.
Use AsyncStorage to store data like theme/language. It's a data to use
on a currently used mobile. You can keep this data and the next time if you use the app you can use these settings.
Use redux to manage data like cars, animals etc. Sometimes you will need to get selected data on login if you don't need to get it every time. For example you get all animals on login, and when you go into animals view you have all animals without additional GET. You can do it on every time, when you go into this view only if are you sure that other user from another account don't update this data, you should do it every time when you navigate to this view.
I'm currently making a REACT web app, and I've made heavy use of localStorage to keep track of data without having to make more api calls, i'll provide a quick explanation of what i'm doing and would like to know if it's a good practice or if there's a better way.
I am working on a blog app and need to have access to some data in other components (such as the username of the currently connected user.)
So each time I make an api call, and receive data that I know I will need in other components (especially if it's not a child component of the one receiving the data), I store it in the localstorage so I can access it easily.
Is making use of the local storage everytime I need it for convenience good ?
Do you have any guidelines regarding when to query data instead of relying on localStorage ?
Thanks for your answer.
Remember that localstorage is persistent data. So it should be used for data that is required when the user leaves your app and comes back to it again.
On the other hand, sharing data between components while your app is running should be done with other mechanisms, typically passing props from a parent component to child components. Also, you can use React context or Redux or similar APIs to store data that is required globally while your app is running.
I would say "it depends"
If you are not accessing data in localStorage way too often, data inside of it are not changing frequently. Then it is OK. (still you need to have fallback for any other storage, try safari in anonymous window there localStorage does not work, old mobiles have limits how much data can be stored etc. etc.)
Otherwise it would be better use other means of storing data locally. Like IndexedDB, WebSQL. You can use some lib for managing those like for indexDB dexie, idb or any other.
If you are using localStorage just to ease your work with react props drilling, then rather use React.context, flux, redux... or any other state managment lib.
I am developing a feature like a cart of which data I want to use in multiple screens. Also, want to manage the view cart and clear cart items but locally only. What is the recommended way to go with?
1) AsyncStorage
2) Redux
Kindly help me and let me know if there is a misconception on my side.
AsyncStorage and Redux serve different purposes.
AsyncStorage is there to allow you to store data that is persisted between app instances (that is, between restarts of your app).
Redux is a state management system that is meant to solve the problem of moving state around components in react.
What you're describing can actually use both, where Redux is used for state management, and the redux store itself can be saved into AsyncStorage for later use. There are Redux related libraries that do just that, such as Redux-Persist.