I'm working on a react application connected to a backend server via WebSockets, and I need to rerender specific react components after the server has sent new data.
I want to subscribe to key/value pairs in a store from any component that automatically triggers a rerender of all the subscribed components. How can I achieve that?
Visualization of the problem
(I'm entirely new to react & frontend development.)
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.
Let's say I have an application with a component named "Protected"
**<Protected />**
This component should be "protected", and only admin users should have access to them (because it contains secret in formations)
But there are 2 problems.
I can't store it on the react application using a protected route on react router. (because my application can be easily reversed)
I can't fetch only the data from the server, I need to fetch the whole component.
I searched about React server side rendering but I didn't fully understand if it's possible.
Can I do this with React server side rendering? Are there more efficient ways?
Thanks !
I use create-react-app to initially create my project, and Redux to manage its state.
Before, I think it's the MVC model because React render the view, and when the someone using the client makes changes, the dispatcher will take the actions then send it to the store, the store using reducer to process, update a state if needed (and isn't state just the model?) and send it back to the view, , then return the updated view.
Is that right?
I am coding a web application with a frontend made up of React, Redux & Redux-Saga.
My backend is running on Express.
I am making a feature where users can join a "lobby" and get notified when other users have also joined the same lobby.
My question is how do you "listen" or "subscribe" to a source of outside data when using React and Redux? How can I listen for notifications on my client from my server?
I've created a react redux project, now how do I add some SEO functionalities to project? I do not want to waste much time while refactoring codes.
You need to setup the redux store on the server and pass its initial state down to the client, so that the server-render and initial client render don't differ
Not all life cycle functions are called on the serverside, mainly componentDidMount is not called. This indeed helps if you want to do some AJAX data fetching (which you only want to do on the client).
If you are using react-router you need to setup the serverside route matching
Here are some more details: React can be used on server side rendering. What does that mean?