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.
Related
I'm trying to implement a simple app displaying data fetched via an API. I'm exposing my own API with an express server. With the API I can basically interact with my SQL database.
For the front-end and especially state management I wanted to use Redux, but I'm not sure how Redux can be used to manage state while simultaneously fetching data from a database / updating the database via the API.
Does Redux hold the same information as the database? How would one implement a combination of Redux and a database?
Redux is for state management. That means it basically has the same functionality as the react native state, that means they are going to get resetted when you restart your app.
A database on the other hand is used to store data also when you restart the App.
So, yes, it's definitly useful to implement both. Information which is going to be saved until it gets deleted should be saved in the database and information that triggers a re-render or basic information like if a checkbox is checken should be save in the state or Redux.
I am looking at building an offline first React Native Expo app that automatically pushes data to an API when the device gets a connection. However I am struggling to see how if this is possible within Expo and need some guidance.
The app will need to store data from an API for offline use (presumably on first load, which will then be used to populate fields in a form). The form needs to work offline, with the input data stored on the device until it receives a new connection. At that point the app should push the data to an API (whilst the app is in the background). So I need to do multiple things:
Automatically download and store data from an API on first launch.
Store input data - from form fields whilst offline.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
I have been looking at redux-offline, but unsure if it still supported and/or will satisfy all four requirements?
There is also redux-persist but I can't see how this satisfies the background sync?
Thanks for any help/guidance!
From my point of view, redux-persist is less opinionated compared to redux-offline. I pick redux-persist with useNetInfo hook to listen to network availability.
1. Automatically download and store data from an API on first launch.
When app launch, query initial data and dispatch to redux store and synced automatically to local storage by redux-persist
2. Store input data - from form fields whilst offline.
With useNetInfo, the app can detect network connectivity status, when not connected, dispatch to the redux store with a flag to indicate offline unsynched data.
You need to write a network connectivity listener which is executed when the network state changes and continuously track unsynched data and sync with the database when available and purge those temporary data like form values.
3. Background app sync
Expo SDK provides API https://docs.expo.dev/versions/latest/sdk/background-fetch/
to run continuously a background task at a certain time threshold.
You can sync offline data when the network returns back while the app is background.
Disclaimer: Background tasks run outside of React componentS tree. You can't access redux store data through the react-redux's store component or hooks based API.
redux-persist saves data with Async Storage and you need to directly access data as below.
AsyncStorage.getItem("persist:[REDUCER_CONTAIN_INTERESTED_DATA]")
This seems to be an issue with server state with a client cache. Looks like an ideal case for react-query to solve.
Automatically download and store data from an API on first launch.
This should be taken care of by query prefetching
Store input data - from form fields whilst offline.
Probably needs client state(redux/Zustand etc) for managing state with unverified fields. For storing submitted forms, react-query supports offline caching of 'mutations'.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
See above.
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.
On my phone when I'm doing debugging...if I save something on redux-persist, then I change some code and save and run: npx react-native run-android...when the new version of the app loads I still can see the data I have saved previously.
Does this mean redux-presist is good as a database substitute so that even after App updates in the Appstore then the data saved will still be in the device and accessible by the updated App?
As far as I know it saves the store into AsyncStorage which uses the sandbox of your app which can be only accessed by your app (app id and only that id can access that sandbox) no matter which version. It is different, I would not consider it as a substitute but rather as a supplement to a data base. That doesn't mean that you can't try to use it as such.
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 :)