I am currently working on a react-native real-time application (a chat app) and I was wondering which would be the better place to manage the socket connection and events handlers (using socket.io).
I am using Redux as global state management, and so I was first thinking of managing the socket in a middleware. But then I thought it could be a good choice to implement it using React context API. The provider would only provide the socket itself to children, and so would not directly trigger any rendering (incoming events would dispatch redux actions).
Today React context mainly suffers from poor rendering optimizations, but in this case this wouldn't be a problem.
How do you manage your sockets connections in your React apps that use Redux? Everything using Redux with middlewares? Or do you combine it with the context API? Do you seen any cons in doing this way?
Thanks!
Related
I am building a simple real time messaging app using react and socket.io for practice.
Current solution uses React's Context only to store socket.io object and React-Redux to store the rest.
The reason that I'm using the context alongside the redux is because redux cries for the following error when I try to store socket.io object into its state.
I also thought of using an exported socket.io module instead of the Context:
import io from "socket.io-client";
const socket = io(URL);
socket.connect();
export socket;
but did read some thread saying that it is not a great practice of using React ecosystem.
Any inputs, please?
It is absolutely fine to use Redux for state management and Context for dependency injection like you are doing here.
That's exactly what each of these were made for.
I am also working on a real-time chat widget project here in my company, and one thing I will suggest you is, while using react, it is all up to you what are you using and where because react is a library. but keeping one thing in mind your components must be scalable. I made my widget using svelte and managed the Web Sockets using event handlers.
you should give it a try.
one file with all the socket code and event listeners attached to them
2nd file with the custom events written which will invoke the socket operations from 1st file.
How to monitor the network request react application makes and best ways to avoid duplicate calls in the react app.
Im using react-redux with hooks and also context api.
I want to create a Social Network With Asp.net Core, React & Redux. But I don't know should I use SignalR with Redux or not? As a Middleware I want to use Redux-Thunk and it's fast.
But still the question is should I use SignalR with Redux?
It will depend upon the environment and the requirement for a long term.
SignalR would give you the capabilities for asynchronous requests,but that you can achieve through thunk or saga.
My recommendation would be to you start designing your API first and a mock UI to render your page ,and then check whether redux-thunk would solve your problem or not.
I am new to react and wondering what the best way to have decoupled communication in a modular React based application. Actually my issue is a plain old JavaScript abstraction over a restful API that is consumed by a React application.
I have a need to notify a consumer of the API abstraction that something has happened (session has timed out on the server as it happens).
Ordinarily I would use pub sub / an event bus.
I have considered adding another shared redux layer but that still couples everything together though delegates the coupling into the shared module which I guess is a mediator.
I can't find much about this online.
Anyone got thoughts on this?
Thanks
You could use Redux Saga/ Thunk for the above purpose
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