I have made a react app which gathers cusotmer information through a form and renders it in another page. The purpose is to have the website open on a tablet with the customer form and then show the result on a computer. So when the form is submited on the tablet, I want the result to automatically update on the computer on the result page. Is this possible to make happen between two different devices?
I am posting the form data to strapi in the form component and then fetching the result in the result component. I have made a refresh button which refreshes the page and updates the result. I have also tried with a setInterval every 10 sec to fetch new data, but it seems a bit unnessesary to refresh every 10 sec. I want it to rerender only when a new result is submited, not every 10 sec or so.
To make the result page automatically update on the computer when the form is submitted on the tablet, you need to use a technique called real-time communication. Real-time communication allows two or more devices to exchange data instantly without refreshing or polling.
One way to implement real-time communication in your react app is to use web sockets. Web sockets are a protocol that enables bidirectional and persistent communication between a client and a server. You can use a library like socket.io to simplify the process of creating and managing web sockets.
Here is an overview of how you can use web sockets with socket.io in your react app:
Install socket.io-client as a dependency in your react app and import it in your components.
Create a socket instance by calling io() with the URL of your strapi server as an argument.
In your form component, after posting the form data to strapi, emit an event with socket.emit() and pass the data as an argument.
In your result component, listen for the event with socket.on() and update the state with the data received as an argument.
Use useEffect() hook to clean up the socket connection when the component unmounts.
Check the documentation for more details.
Related
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/
Can you show me how to re render Flatlist on refresh? I use SQLite database for my local database and I have two pages one for display all workers and one for create worker. How I re render automatically page for display all workers when I create new Worker (live reload/refresh)?
Depending on the requirements of your application, the most easiest solution would be to use the get method you're using to pull data from your application as soon as the user presses the create worker button and update your data array in your state or props (preferably props). React Native will always re-render if it detects a change within the state or props.
One issue with the above method is, it will refresh for the current user, but imagine a different user is using the app too, it won't live refresh for them unless they refresh the component themselves (this could be tabbing in and out of the page).
One work around would be to use Socket.io (https://socket.io/), to build a truly real-time application, Socket.io would allow you to listen for changes from all users and send an update request to all users which in turn should refresh their applications depending on the changes.
EDIT:
Add the below method to your WorkersView class, assuming it is different from your createWorker screen then the WorkersView screen will update every time a user enters the screen.
componentDidMount() {
this.props.navigation.addListener('willFocus', this.getAllWorkers);
}
Note: I would recommend using a storage system like Redux or AsyncStorage, then you can communicate information across all your screens more efficiently and effectively.
I want to fetch all the data needed to display the dashboard of my app in react-native. The app is similar to the facebook one
I am using react-native, redux, redux-saga, react-navigation and a REST api.
I have to fetch the post list to display the main page and the notification count for the headerBar. The other tabs pages are mounted at the same time as the main one to allow fluid transition. So I need the current user too for the Account page
Finally, the store is persisted and the app can stay in background mode for a long time. So I need to refresh my data often to be sure to have the last changes.
I have sagas which make the call and launch actions to update the store.
Here the strategies I found :
I can connect each page component and give them a fetchAllPageData() which dispatch a fetch action that I call in componentDidMount
I can connect smaller components to allow them to pull the data they need with the same strategy (ie. fetchUser to the component that display the user in the Account Page, fetchNotificationCount to the component that display the number of notifications ...)
I can use create a redux-middleware which listen for page change and call all fetch data actions.
I am currently using a mix of the first and second solutions but I am not very happy with it :
I don't always know where the data are fetched
The strategies which refresh the data once the component is mounted are a bit "hacky" and random
I often have the to move where the call is done when refactoring
What is the state of the art on this subject? What is your recommendation?
The usual recommendation is to intercept actions that make AJAX requests in the middleware and resolve them there before passing the result through.
This article explains it in more depth.
You can / should do in componentDidMount or componentWillMount.
I am building an isomorphic app with React that must support users without JS.
I am new in this technology and I have a basic doubt:
The server can store the components states to emulate what React does in the client-side?
I imagine this flow when the user dont have JS:
The user click a button and send a request to the server.
The server recovers the state of the app and makes changes in it.
The components listen this changes and are rendered again.
Is it correct?
Assuming that you're using react-router :
The server aims to initialize your state, to provide it the default minimum values necessary to make your application work while getting an url.
For example, if you have an application in which you want to display a user list, let say on /users URL, when you'll send your first request, the server will store the users in the react state.
After that first load, you'll be working on the client side using react-router, and making XHR request.
However, if you refresh your page, the process will start again : first load initializing the state and then client side navigation.
EDIT : Explanations =>
When you want to use react on the server, this means that you use a Nodejs server. The fact is that react-dom provides a method called renderToString that transform a react jsx component into standard HTML.
This aims to load the first call faster
Why ?
When you load a "big" JS application on the client, you have some delay time, the time your browser needs to download your JS bundle.
Server side rendering aims to avoid that behaviour, or at least, to gives the feeling that the app starts faster.
In no case you can only use react, even if you use your server side renders. Why ? . Because your events on buttons, or asynchronous load on client, or keypress are in JS language.
I come from RoR world, and would like to change my application using Redux and React.
React is very simple to understand, you build it up and connect to Redux using web-sockets (Why not just xhr?), Redux accept different actions and respond to React etc.
What I don't understand is, do you save all users in redux store? Or do you use another noSQL to save them? And when I terminate the redux store and start it up again, does my data vanish? I can't find article describing this?
Redux manages state of the client side. Example of what redux handles:
filter in table changed (set state to "loading" and replace table with spinner)
results were loaded (display results in the table)
loading of results failed (show error message)
It does not handle remote communication in itself. I assume that you got the impression that you needs websockets from this tutorial. What happens there is that redux is used on server as well as on client. And websockets are used to make the communication between server and client realtime. The same actions that are executed locally are executed on server and that allows you to propagate them to other clients.
More about AJAX calls and handling asynchronousness in redux:
How to make AJAX request in redux
redux-thunk
redux-saga