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.
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 have a basic composition function which pulls in data from an api.
This is fine there are lots of good examples
https://vueschool.io/articles/vuejs-tutorials/state-management-with-composition-api/
I can share state between pages but refreshing any page resets my data. Is there a standard or good practice way to handle this? I use vuexpersist with vuex to solve this.
Are people just writing manually to localstorage?
If you refresh or reload, the "state" is expected to be missing since you are loading the app again. If you need data persistency then manually writing to local storage is the common action (so that is a yes for your last question).
You need to manually write the state recovery for your app, could it be by restoring data from local storage, retrieving data again from the API or even restoring the user session if you need authentication.
I'm new for apollo-client and I wanted to replace vuex for state management keeping that in mind is there any way I can put my mutations and queries in a centralized way as vuex does? most tutorials and documents I found, call queries and mutations in each component which may cause repetition of queries and mutation so how can I solve this problem?
So, I don't have a ton of Vuex experience, but I have a production app using Vue Apollo, and it's really a different mindset.
Apollo isn't a local store of data, it's a structured way of accessing remote data. It's more a substitute for Axios than for Vuex.
In the case of Apollo, repeating a query isn't a bad thing, because Apollo has a pretty smart caching strategy. You can call queries with fetchPolicy: 'cache-first' to direct Apollo not to refetch already fetched data.
(Now, if data is frequently changing -- such as in a chat app -- you may not want to only rely on cached data. That's a decision you make on a query-by-query basis.)
That said, I would not use Apollo to store local data that is meant to carry from page to page (such as an e-commerce shopping cart). I would stick with Vuex for that.
You should create .js or .ts files with the corresponding query or mutation. Then, if you do not want to store the state in the Apollo Client State Management System, you can just call the corresponding service of state management in Vue.js. I am working with React.js, so what I would use in my case is the Context API, I am sure you can find the same thing for Vue.js.
Check out those links on how to implement Context API similar to React.js:
Context API for Vue.js/Nuxt.js applications
React context-like feature
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.