So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
Related
i want to send an ID that i get from a database to another screen and i've seen how to do it on google but people only use hook components and i'm new to react native so i don't really understand how to do it.
You can send data from one screen to another using navigation params. Here is example: https://reactnavigation.org/docs/params/.
I am creating an application to order food online and I want to perform a functionality where the user does not have to scroll or do any action to see reflected on the screen of their device that their order has changed status.
Example: The user enters to see the status of their order and being there on that screen that the user can see how the status of the order is updated without having to scroll.
I don't know if I should use listeners or some way with async and wait
I am using react native with hooks, react navigation 5, axios for API call
Do you know how I could do this? how can I find more information on this.
I appreciate any help you can give me.
There are two ways you can solve this.
Polling - you can create some interval, say 1 second, for axios to refetch the data you need. Wrapping your axios call with setInterval() https://www.w3schools.com/jsref/met_win_setinterval.asp, is one form of this.
Web Sockets - you can create a web socket that maintains a constant connection to your app and server, so when updates happen it is automatically reflected in the UI. You can check out WebSocket support in React Native here: https://reactnative.dev/docs/network.html#websocket-support
I have a basic flutter app with 2 pages and 1 bloc.
The home page displays a list of users (only 2 attributes)
When a user-item is clicked, a detail page displays all attributes
The user data is fetched using a bloc which emits 2 states
AllUsersLoadedState from the api domain.com/users
UserLoadedState from the api domain.com/users/id
Because both home page and detail page is using the same bloc in their BlocBuilder when I navigate to the detail page and hit the back button, the home page is crashed.
Any way to handle it without writing 2 individual bloc?
If you want to share a BLoC between screens, then you should create the BLoC in such a way that it won't be destroyed while those 2 screens are active.
One way of doing this is to provide the BLoC using the Provider package, or as an InheritedWidget. If you use Provider then on each screen you just ask for the BLoC using Provider.of<MyBloc>(context). You will have to read more about Provider to learn how to use it.
Another way is passing the BLoC as a variable to your widget's constructor.
I figured out what was the issue.
Because both pages were using the same bloc they would rebuild on both states while the intended behavior was for the home page to rebuild only on AllUsersLoadedState and detail page to rebuild only on UserLoadedState.
So when I navigate to the detail page and a UserLoadedState is received the home page didn't know how to handle the state and would crash.
The solution is to use the condition parameter in the bloc builder to skip rebuilding on an unwanted state.
I'm new to React Native and have implemented a 'bodge' to get my app working but I wanted to know the correct way to implement the following...
The user has the option to log out on every page which currently calls a LOGOUT action which tells the reducers to revert back to initial states. It also sets the navigation reducer that I made to go to the 'login' screen. Once componentWillUpdate fires it sees this and then calls Actions.login(). This all works but is definitely not 'clean'.
Any advice on the correct implementation of this set state and redirect flow that I need?
I'm using the latest version of all of the libraries involved.
I have a SPA built in Vue.js that lets the user input several values to create something like a recipe. All these values are stored in Vuex state. I would like to be able to create a URL using the state values that the user entered so that another user can load the app with those values already entered. Essentially I want to allow users to share the recipes they created in my app by sharing a URL.
I'm imagining a "share" button which will copy the created URL to the user's clipboard which they can then post on social media or whatever. Then when someone visits the link, they will go to my app and the vuex state values will automatically be updated to the parameter values found in the URL.
What is the best way to achieve this functionality? Is this something that is possible with vue-router?
Use the $route.query property provided by vue-router.
Pass in a parameters through your URL like http://example.com/#/?amount=10 and access them with this.$route.query.amount.
Update your vuex store in the main component's mounted() method.
Official Documentation for the Route object
If I understand you correctly the vue-router should do exactly that.
have a look at the documentation where they send the user id. You can pass as many parameters as you like.
https://router.vuejs.org/en/essentials/dynamic-matching.html
note: you may consider rebuilding application paths using the router.