Ruteo en aplicaciones de Redux y React.js

Sergio Xalambrí
Apr 6, 2016 · 4 min read

Usar Redux para almacenar el estado de una aplicación es genial. Y resulta que la ruta actual de la aplicación es, en sí, parte del estado de la misma. Tiene sentido entonces que eso se guarde en el Store de Redux.

Eso nos permitiría guardar el estado almacenado en Redux y al volver a aplicarlo y que la aplicación este en la misma ruta que lo dejamos con los mismos datos.

react-router

React-router es una librería para manejar rutas en aplicación de React.js. Con esta se nos facilita el decidir que componentes renderizar dependiendo de la ruta. El problema es que si la usamos junto a Redux estas dos librerías no trabajan en conjunto, para lograr esto existe react-router-redux.

react-router-redux

Con esta librería podemos hacer que la ruta actual de nuestra aplicación se guarde en nuestro Store de Redux, de esta forma todo el estado de nuestra aplicación es manejado por Redux, el cambio de ruta pasaría a despachar una acción que nos permite modificar el estado en base a esta.

Veamos como usarlo. Primero necesitamos instalar nuestras dependencias:

Como funciona

Con esta librería usamos tanto React Router como Redux tal cual lo indica su documentación. La librería se encarga de sincronizarlas ambas usando un reducer de Redux y una función que combina el Store con el History de React Router que vayamos a usar.

Implementación

Lo primero que vamos a hacer es crear nuestro Store usando el reducer que nos da React Router Redux.

Este reducer se encarga de guardar en el Store la ruta actual de la aplicación.

Una vez hecho esto vamos a definir las rutas y combinar React Router con Redux.

Ahora, cada vez que naveguemos por nuestra aplicación el history sincronizado va a pasar el cambio de ruta a Redux y luego a React Router para que cambie los componentes renderizados.

Cambiando el Store usando acciones

React Router Redux también nos provee de un middleware que nos permite usar cinco acciones propias para cambiar las ruta mediante código.

Para eso al crear nuestro Store debemos aplicar primero nuestro middleware.

Una vez aplicado el middleware a nuestro Store podemos usar los creadores de acciones que nos trae React Router Redux para cambiar la ruta.

Con estas acciones podemos, mediante acciones de Redux, cambiar la ruta actual de nuestra aplicación fácilmente.

Como me entero cuando cambia la ruta?

En algunos casos vamos a querer saber cuando el usuario cambia a otra vista de nuestra aplicación, por ejemplo si usamos Google Analytics. Eso se puede lograr simplemente usando history.listen().

Este método de nuestro history recibe una función que como único argumento recibe el objeto location cada vez que el Store se actualice. De la siguiente forma.

Acción de Redux

Además de usar history.listen podemos, dentro de nuestros reducers, escuchar la acción LOCATION_CHANGE que se despacha luego de cada cambio del history y nos permite reaccionar a cambios de rutas desde cualquier reducer de nuestra aplicación.

Conclusión

Controla desde Redux el estado de nuestra aplicación incluyendo al ruta nos permite tener en Redux control total de nuestra aplicación, pudiendo serializarlo y volver al mismo estado incluyendo al ruta e incluso controlar mediante el despacho de acciones el cambio de ruta como vimos arriba.

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