Best practices for React, Redux and Websocket (Keeping one class to handle requests)

Question

This question is related to React, Redux and Websocket (socket.io).

In this approach I want to update my UI real time. I’m opening individual sockets in each componentDidMount in each file which I want to update.

(Ex: if I have notification and statistics to update, I’ll open 2 sockets with both notification and statistics)

One of my colleague suggested me that instead of opening multiple socket connections to each end point, open a single socket in a main api-service file and trigger actions respect to each key of the response.

What’s the best practice to achieve this task and if there are any demos, please help me with one of them.

Thank you!

Answer 1

The standard location for socket-like connections in a Redux app is in middleware. The middleware can listen for dispatched actions telling it to subscribe and unsubscribe to things, and also dispatch Redux actions based on received messages.

My Redux addons catalog lists a wide variety of existing socket-related middleware.