I try to make a todo-app using react/(maybe)redux. My goal is to have a client that cant communicate with server using RESTful API to fetch and update data.
I already wrote my server that can handle AJAX request and host it on heroku.
My next step is to create a front-end using react or react/redux. Im not sure what is the right approach to store and update data.
Should I fetch and update data directly from client to server? If this the case, I think I only need to use react, do I ?
The second approach, I guess I need to use react and redux, is to fetch the "initial" data from server and store in reducers, display and change whatever user wants. Then, at the end, update the data back to server.
Im still learning web dev. I really appreciate any suggestion or documents that I can read
React alone will be plenty sufficient for a small app. As a rule, adding redux adds complexity and it is best used when many containers need to access the same state.
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.
Data usage really matters for my targeted users. So, I am looking for an APPROACH that'll help me reduce the number of data fetching during react rerender cycles in React and React-native App.
Let's say I have a page that renders all the Items fetched from an API. Since the API's data can be updated at anytime, I am obliged to re-call the API whenever the user displays this page.
IS THERE ANY WAY FOR ME TO KNOW THAT THE DATA HAS BEEN UPDATED WITHOUT BEING OBIGED TO RECALL THE API?? Because I think that the less HTTP requests I send the less mobile data I consume (Maybe I am wrong... I don't know)
I thought of implementing a solution with Redux and Socket.io :
I wanted to prepare an event called data-updated that will be managed by socket.io and whenever one of the users performs an action that updates the item lits (The API data), the data-updated event will be triggered and all the connected users will be notified. Then in the data-updated event handler I will update the item list state slice in the redux store.
My worry is that since socke.io keeps the connection between users and the server alive during the whole session, Won't this approach consume even more Mobile data than recalling the server at any rendering??
You can proceed with graphql with mutations and its caching mechanism, its pretty cool and if I mention if it is handled efficiently you can run your application in 2g network also with speed. Checkout its usage and advantages over REST you gonna love it. https://graphql.org/
Another way is by using redisCache but personally I've not used it though you can check.
You can use React-query lib for data fetching, updating, caching etc.you can read more about it but read its docs.
https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/
I need someone to point me to the right direction, i am playing around with SQL databases and wish to connect the dots with react native. how do i get react native user input to update a database value for example.
if anyone can point me in the right direction please
So typically react native doesnt directly communicate with an sql database, the backend does, this is for many reasons, mainly security. If you want to avoid building a backend, you should look into Firebase. Other than that, you can use SQLLite on react native, but you'll only be able to store locally
To answer your question, you'll probably want to create a simple REST Api backend to communicate with your app. The backend will update the database, not the app.
I've taken the program at Udacity for react and react native, and it taught me well id say.
Now that I am equipped with the skills and have a good knowledge of the environment and redux etc. Im trying to build my first test app that handles data living remotely.
In the React tutorials we would use local mock data, and try to fetch it and even simulating the delay with a setTimeout call. But the problem is the tutorials worked excellent only for the types of apps they were building. I'll get to this in a bit...
My app description:
At the moment i'm making a test app and so far I can : retrieve a collection of food items ( remote data), render the data, and press "LIKE" on anyone. After pressing Like that food item URL gets saved into another remote file under the authedUser's account under a "favorites" property.
The food data at the moment is in a json file hosted on a github repository.
and so is the users account data.
The thing I noticed in the react course was, Data would be received into the redux store.
from there anytime you dispatched an action which involved data changes like "Favoriting" something, the app would first dispatch an action to server. Once that resolves it would dispatch to the redux store and affect it there.
Now from what I understand... this is a way to keep the data in sync? Is this how other applications do it? or is it when data is changed, you only dispatch the change to the server, and request/fetch the new data into redux once the action resolves? The tutorials would receive the initial data, and like this it would be set and stone and then rely on the dispatches to keep it in sync. would it be better to simply use local state, fetch the data we want. vs using the store?
Im not exactly sure whats best, but to me the idea of receiving the entire data file into the app seems not scalable? like when you use instagram for example, your phone doesn't download the entire instagram database. Im thinking it downloads only your profile? and url's to your friends? etc?
so for this test app that I am trying to make ( described in italic font above ^ )
I'm not sure how to go about it. I definitely don't think its appropriate to receive the entire data file. I know that I want the user to receive food items onto the screen, but only a handful at a time, maybe through a search it modifies the results on screen. then the user can like a food item.
This is the first time i'm working on an application of this sort, and I do think i'm missing something.
It would be a good idea to not integrate Redux at first. Just build the application in plain React.
Now talking about your app. As you said, is a bad idea to download the entire database. When you have to fetch a lot of data a common pattern is to use pagination. It works like this: your app asks for 10 food items. The server returns those 10 and tells you that there is more data and you should make another request if you want to fetch more. It doesn't make sense to fetch 1000 products if the user can see only 10 at a time, right ?
Let's say you like a food item. After you press "like" it is not enough to update your app state, you also need to make the change on the server. How you do this ? Usually you have a food item id(let's say 123) and you maybe you make a POST to https://server.com/like/123. Now that request may fail for various reasons and the server will not register your like. This is way you update the local state only after you successfully updated in the database. In addition you may want to update the number of the likes(maybe other users liked that food item since you fetch) so the server will return the updated number of likes.
Where does Redux fit here ? In React every component has its own state. They can share data between them using props. But this doesn't scale and you will usually end up in a situation called Prop Drilling. Redux store is some kind of global state. For instance:
<FoodItems>
<FoodItem key=1/>
<FoodItem key=2/>
</FoodItems>
Let's say somehow you update the description for the first FoodItem. How do you tell that to other components ? In Redux you dispatch an action and modify the store. Now other components can connect to the store and get the value from there.
I feel this is a stupid question, but I am having a problem answering it myself, so I am relying on experienced programmers to help me with this.
I have a react app that is running on a laravel backend (php), and using redux for a presisted state for my app.
I essentially request all data that will be present on another page, and would like to know, if I should just use the data that I initially have in my redux store or just reload everything on a different page?
You should use the data in redux store. But persisted data can be altered, so in case you want to verify the data or something along the lines, you can just compare the data that is on the client side with that on the server. Otherwise, the very idea of redux is to use data in multiple pages (components)