{"id":3565,"date":"2018-10-20T03:13:25","date_gmt":"2018-10-20T03:13:25","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/10\/20\/como-empezar-con-redux-en-7-minutos\/"},"modified":"2024-04-14T16:39:13","modified_gmt":"2024-04-14T22:39:13","slug":"como-empezar-con-redux-en-7-minutos","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-empezar-con-redux-en-7-minutos\/","title":{"rendered":"\u00bfC\u00f3mo empezar con Redux en 7 minutos?"},"content":{"rendered":"

\u00bfQu\u00e9 es Redux?<\/h2>\n\n\n\n
\n

Redux es un contenedor predecible del estado de aplicaciones JavaScript.<\/p>\n\n\n\n

Te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos ambientes (cliente, servidor y nativo), y son f\u00e1ciles de probar. Adem\u00e1s de eso, provee una gran experiencia de desarrollo, gracias a edici\u00f3n en vivo combinado con un depurador sobre una l\u00ednea de tiempo.<\/p>\nredux.org<\/cite><\/blockquote>\n\n\n\n

Te permite controlar el flujo de datos de una aplicaci\u00f3n Javascript, este flujo de los datos funciona en una sola direcci\u00f3n. Por esta \u00fanica direcci\u00f3n es mucho m\u00e1s f\u00e1cil controlar las mutaciones <\/strong>and operaciones as\u00edncronas.<\/strong><\/p>\n\n\n\n

Redux es parecido a flux<\/a><\/strong>, de hecho est\u00e1 basado en flux<\/p>\n\n\n\n

En el estado de una aplicaci\u00f3n, principalmente en aplicaciones SPA<\/a>, esto es muy importante, porque las aplicaciones web modernas tienen gran complejidad de operaciones as\u00edncronas. Adem\u00e1s de controlar el estado entre los componentes.<\/p>\n\n\n\n

\u00bfQu\u00e9 problemas puedo mitigar con Redux?<\/h2>\n\n\n\n

En el ejemplo de aplicaciones web, estas necesitan controlar peticiones a servidores, obtener datos y controlar el estado en el cliente. Aun cuando estos datos no han sido guardados en el servidor.<\/p>\n\n\n\n

Estas aplicaciones modernas requieren de un control complejo y por eso nuevos patrones de arquitectura como Redux y flux  nacen para hacer el desarrollo m\u00e1s productivo.<\/p>\n\n\n\n

Las mutaciones <\/strong>de objetos son dif\u00edciles de manejar y m\u00e1s a escalas medianas y grandes. Se comienza a perder el control de los datos, este flujo de datos generan comportamiento no deseados. Mala informaci\u00f3n desplegada al usuario y c\u00f3digo que es muy dif\u00edcil de mantener.<\/p>\n\n\n\n

Sin contar cosas m\u00e1s elevadas como tu salud y causa de estr\u00e9s por el esfuerzo en arreglar estas inconsistencias, te hace perder tiempo para mantener la aplicaci\u00f3n funcionando correctamente. Por si fuera poco afectas a tus usuarios porque ellos obtienen informaci\u00f3n incorrecta y pierden su tiempo al utilizar esa informaci\u00f3n.<\/p>\n\n\n\n

\u00bfQu\u00e9 decir de las operaciones as\u00edncronas<\/strong>? Bueno, pr\u00e1cticamente pasa lo mismo o a\u00fan peor. Porque en una operaci\u00f3n as\u00edncrona no sabes cuando obtendr\u00e1s el resultado y adem\u00e1s normalmente vienen acompa\u00f1adas con el deseo de hacer modificaciones al estado de la aplicaci\u00f3n.<\/p>\n\n\n\n

Un ejemplo com\u00fan es el control de los datos de tu aplicaci\u00f3n con cualquier frawework front-end de componentes visuales.<\/p>\n\n\n\n

\u00bfDe qu\u00e9 est\u00e1 hecho Redux? Tres elementos<\/h2>\n\n\n\n

Store. <\/strong>El store es un objeto donde guardas toda la informaci\u00f3n del estado, es como el modelo de una aplicaci\u00f3n, con la excepci\u00f3n que no lo puedes modificar directamente, es necesario disparar una acci\u00f3n para modificar el estado.<\/p>\n\n\n\n

Actions. <\/strong>Son el medio por el cual indicas que quieres realizar una modificaci\u00f3n en el estado, es un mensaje o notificaci\u00f3n liviana. Solo enviando la informaci\u00f3n necesaria para realizar el cambio.<\/p>\n\n\n\n

Reducers<\/strong>. Son las funciones que realizan el cambio en el estado o store, lo que hacen internamente es crear un nuevo estado con la informaci\u00f3n actualizada, de tal manera que los cambios se reflejan inmediatamente en la aplicaci\u00f3n. Los reducers son funciones puras<\/a><\/strong>, es decir, sin efectos colaterales, no mutan el estado, sino que crean uno con informaci\u00f3n nueva.<\/p>\n\n\n\n

\u00bfQu\u00e9 principios debo seguir? Tres principios<\/h2>\n\n\n\n

Un \u00fanico Store para representar el estado de toda la aplicaci\u00f3n<\/strong>. Tener una sola fuente de datos para toda tu aplicaci\u00f3n permite tener centralizada la informaci\u00f3n, evita problemas de comunicaci\u00f3n entre componentes para desplegar los datos, f\u00e1cil de depurar y menos tiempo agregando funcionalidad o detectando errores.<\/p>\n\n\n\n

Estado de solo lectura. <\/strong>Esto permite tener el control de cambios y evitar un relajo entre los diferentes componentes de tu aplicaci\u00f3n, ni los componentes, ni peticiones ajax pueden modificar directamente el Estado (state) <\/strong>de tu aplicaci\u00f3n, esto quiere decir que si quieres actualizar tu estado, debes  hacerlo a trav\u00e9s de actions<\/strong>, de esta manera redux se encarga de realizar las actualizaciones de manera estricta y en el orden que le corresponden.<\/p>\n\n\n\n

Los cambios solo se hacen con funciones puras. <\/strong>Al realizar los cambios con funciones puras, lo que realmente se hace es crear un nuevo objeto con la informaci\u00f3n actualizada, estas funciones puras son los reducers <\/strong>y no mutan el estado, al no mutar el estado, se evitan problemas de control, datos incorrectos, mal comportamiento y errores, tambi\u00e9n permite que la depuraci\u00f3n sea m\u00e1s f\u00e1cil. Puedes dividir los reducer en varios archivos diferentes y las pruebas unitarias son f\u00e1ciles de implementar. Los reducers son funciones puras que toman el estado anterior y una acci\u00f3n, y devuelven un nuevo estado.<\/p>\n\n\n\n

Otras arquitecturas como MVC (Modelo, Vista, Controlador), los cambios pueden existir en ambas direcciones, es decir, la vista puede cambiar el estado, el modelo lo podr\u00eda modificar y tambi\u00e9n el controlador. Todos estos cambios necesitan estar sincronizados en varias partes de una aplicaci\u00f3n para evitar inconsistencias, lamentablemente este problema de inconsistencia se vuelve muy dif\u00edcil y tedioso de resolver.<\/p>\n\n\n\n

Lo anterior no sucede con Redux.<\/p>\n\n\n\n

\u00bfC\u00f3mo funciona? Mi primer estado predecible con Redux<\/h2>\n\n\n\n

Primero veamos el flujo de una sola direcci\u00f3n de redux:<\/p>\n\n\n\n

\"Redux:
Redux: flujo de control una sola direcci\u00f3n<\/figcaption><\/figure>\n\n\n\n

Ahora un ejemplo concreto para saber de que estamos hablando, el control de un contador:<\/p>\n\n\n\n

\n See the Pen \n Redux: Contador State, es5<\/a> by Jaime Cervantes Velasco (@jaime_cervantes_ve<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n