Im working on a chat app that uses Apollo client and React
I made my Messages Window component run a cache update in the componentDidMount.
My goal is to update the unread count when the messages are opened. This updates when getting the message but the frontend UI needs the optimistic ui update.
I refresh the page:
First click causes no response...
Every click after that seems to update the previous.
Any ideas?
Here's my onload for the component
Did have setup redux in your app then call action at when user open message and you will get new data at componentwillreceve method via reducer then you can do what ever you want
Related
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.
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.
Is it possible to reload/remount react components? I have simple app made in spring boot and react. I've implemented simple notifications via web-sockets (stomp). In react i'm using SockJSClient component like this:
<SockJsClient url='http://localhost:8080/voting-socket' topics={['/queue/notification', '/user/queue/notification']}
onMessage={this.onMessageReceived} onConnect={this.onConnect} debug headers={{Authorization: "Bearer " + localStorage.getItem(ACCESS_TOKEN)}}/>
the problem occurs when i get to my app as a guest (then socket connects to spring boot app without authentication) and login. Web-socket connection stays the same (im not authenticated). It only works when i hit refresh button in the browser (whole dom and web-sockets get rebuild then). So my questions is can i somehow manually rebuild/reconnect sockjs component?
In order to trigger child component update, parent component state should be updated. In order to trigger component remount, key prop can be updated, e.g.:
<SockJsClient key={this.state.auth} ... />
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.
Is there a way to invoke componentWillUnmount every time I make a new request?
Right now, it is called only sometimes. It's not even called when I refresh the browser.
Situation:
I have a like/dislike module just like stack overflow's. Initially, I sent an ajax request every time a user clicks like or dislike. Because this was so slow and also because I had to disable the buttons to prevent duplications, I instead decided to do an optimistic update. Basically, I just update states when user clicks like or dislike, and I send the ajax request during the componentWillUnmount method. If it doesn't get called, all the likes and dislikes disappear :(
You don't want componentWillUnmount for this. If you're using Flux with React, it's pretty simple: when the store notifies the component that it has changed (after an Ajax request was made), you can ask the store if the update went through successfully. If it hasn't, you can roll back your optimistic update. Are you using Flux?
Just before updating the state, you can check the current state. If user already clicked like or dislike, do not send the ajax request. Otherwise, send the ajax request.
I observed componentWillMount and componentDidMount being called every time, but componentWillUnmount not being called on unmount immediately. Thus two or more react class instances of the same type were binded to the same dom object and I faced issues. componentWillUnmount gets called way later as a batch cleaning all binded objects. I am using react 0.14.2.