Usando Redux en el servidor con Socket.io

Sergio Xalambrí
May 20, 2016 · 5 min read

Redux fue hecho para controlar el estado de la UI de una aplicación. Resulta que mientras podamos tener una única instancia del store Redux también puede servir en Backend, por ejemplo en aplicaciones Real-time usando Socket.io, donde el estado de la aplicación se mantendría, e incluso compartiría entre varios usuarios conectados.

Instalación de dependencias

Creando nuestro Store y Reducers

Lo primero que vamos a hacer es crear los reducers, imaginemos que tenemos una aplicación de chat, el estado de nuestra aplicación podría ser algo así:

Vamos entonces a crear los ducks de nuestra aplicación.

Ese va a ser nuestro duck para los mensajes del chat.

Y ese va a ser nuestro duck para manejar los usuarios. Como vemos nuestros ducks son muy simples, solo podemos agregar usuarios y en cuanto a los mensajes solo podemos agregar y quitar mensajes.

Ahora para crear nuestro reducer nos traemos los de nuestros ducks:

Y con eso ya tenemos nuestro reducer listo. Ahora vamos a crear nuestro servidor de WebSockets.

Servidor de WebSockets

Una vez que tenemos nuestro reducer y nuestros creadores de acciones vamos a crear un servidor de WebSockets usando socket.io.

Luego vamos a iniciar nuestro servidor y pasarle nuestro store.

Ahora solo nos queda levantar nuestro servidor usando Node.js

Con esto ya tenemos un servidor de WebSockets cuyo estado se guarda en Redux. Ahora vemos como sería un cliente sencillo.

Cliente web

Primero vamos a crear un duck para nuestra aplicación.

Ese super simple duck va a ser toda nuestra aplicación de Redux en el Frontend. Ahora vamos a iniciar nuestro Store y conectarnos al servidor de sockets.

Con eso ahora el estado de nuestra aplicación nos va a llegar por WebSockets y con eso vamos a iniciar nuestro Store, además en cada cambio que se realice en el servidor vamos a recibir todo el nuevo estado y vamos a actualizar el Store.

Por último en nuestra aplicación nos tocaría que cada acción despachada se envíe por WebSockets en el canal action de forma que llegue al servidor y se actualice el Store ahí guardado.

Una última idea podría ser implementar un middleware en nuestro Store del lado del servidor que se encargue de guardar en una base de datos el payload de cada acción para que no se pierdan datos si se cae el servidor.

Conclusión

Este ejemplo es super simple, y no recomiendo que se use tal cual en producción. En una aplicación de verdad donde queramos replicar el Store en el servidor lo ideal sería que nuestro servidor de WebSockets nos mande el estado inicial del Store al conectarnos y luego cada acción que se realice, las cuales deberían crearse en el cliente que genera la acción y mandarlas por socket.io.

De esta forma en el cliente solo actualicemos lo necesario y no todo el estado de nuestra aplicación de golpe, esto reduciría la cantidad de datos enviados por WebSockets (menor consumo de datos en móviles), de la misma forma el servidor debería despachar a su Store propio la acción, así el estado ahí almacenado se mantendría actualizado para la próxima persona en conectarse y mientras cada cliente tiene su propio Store y se encarga de actualizarse.

Un problema que podría llegar a ocurrir de usar esta forma es que si un cliente se desconecta no le llegarían algunas acciones, lo cual puede significar una perdida de datos y en dejar de estar sincronizado con el Store. Esto se puede solucionar ya sea enviando todo el estado cada X tiempo o crear alguna especie de cola de acciones cuando el servidor detecte una desconexión del cliente.

Image for post
Image for post

React & Redux

Serie de artículos y tutoriales sobre Redux.js

Sergio Xalambrí

Written by

Senior Software Engineer & Technical Writer— https://sergiodxa.com

React & Redux

Serie de artículos y tutoriales sobre Redux.js y React.js. Aprende como usar estas tecnologías para desarrollar aplicaciones web modernas más poderosas y usando las mejores prácticas.

Sergio Xalambrí

Written by

Senior Software Engineer & Technical Writer— https://sergiodxa.com

React & Redux

Serie de artículos y tutoriales sobre Redux.js y React.js. Aprende como usar estas tecnologías para desarrollar aplicaciones web modernas más poderosas y usando las mejores prácticas.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store