Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Redux
Code

Comenzando con Redux: ¿Por qué Redux?

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Cuando estés aprendiendo React, casi siempre escucharás a la gente decir lo genial que es Redux y que debes intentarlo. El ecosistema React está creciendo a un ritmo rápido, y hay tantas bibliotecas que puedes conectar con React, como flow, redux, middlewares, mobx, etc.

Aprender Reacr es fácil, pero acostumbrarse a todo el ecosistema de React lleva su tiempo. Este tutorial es una introducción a uno de los componentes integrales del ecosistema React-Redux.

Terminología básica no Redux

Estas son algunas de las terminologías de uso común con las que quizás no esté familiarizado, pero no son específicas de Redux per se. Puede revisar esta sección y volver aquí cuando / si algo no tiene sentido.

Función Pura

Una función pura es solo una función normal con dos restricciones adicionales que debe cumplir:

  1. Dado un conjunto de entradas, la función siempre debe devolver la misma salida.
  2. No produce efectos secundarios.

Por ejemplo, aquí hay una función pura que devuelve la suma de dos números.

Las funciones puras dan un resultado predecible y son deterministas. Una función se vuelve impura cuando realiza algo más que calcular su valor de retorno.

Por ejemplo, la función de agregar a continuación usa un estado global para calcular su salida. Además, la función también registra el valor en la consola, que se considera un efecto secundario.

Efectos secundarios observables

"Efectos secundarios observables" es un término elegante para las interacciones realizadas por una función con el mundo exterior. Si una función intenta escribir un valor en una variable que existe fuera de la función o intenta llamar a un método externo, entonces puede llamar a estos efectos secundarios con seguridad.

Sin embargo, si una función pura llama a otra función pura, entonces la función puede tratarse como pura. Estos son algunos de los efectos secundarios comunes:

  • Haciendo llamados API
  • iniciar sesión en la consola o imprimir datos
  • mutando datos
  • Manipulación DOM
  • recuperando la hora actual

Contenedor y componentes de presentación

La división de la arquitectura de componentes en dos es útil al trabajar con aplicaciones React. Puede clasificarlos ampliamente en dos categorías: componentes de contenedor y componentes de presentación. También son popularmente conocidos como componentes inteligentes y tontos.

El componente contenedor se refiere a cómo funcionan las cosas, mientras que los componentes de presentación se preocupan por cómo se ven las cosas. Para comprender mejor los conceptos, lo he cubierto en otro tutorial: contenedor vs. componentes de presentación en React.

Objetos mutables vs. objetos inmutables

Un objeto mutable se puede definir de la siguiente manera:

Un objeto mutable es un objeto cuyo estado se puede modificar una vez creado.

La inmutabilidad es exactamente lo opuesto: un objeto inmutable es un objeto cuyo estado no se puede modificar después de haber sido creado. En JavaScript, las cadenas y los números son inmutables, pero los objetos y las matrices no lo son. El ejemplo demuestra mejor la diferencia.

Para hacer que los objetos sean inmutables, use el método Object.assign para crear un nuevo método o el nuevo operador de dispersión.

¿Qué es Redux?

La página oficial define Redux de la siguiente manera:

Redux es un contenedor de estado predecible para aplicaciones de JavaScript.

Aunque eso describe con precisión Redux, es fácil perderse cuando ve la imagen más grande de Redux por primera vez. Tiene tantas piezas móviles que debes unir. Pero una vez que lo hagas, te lo prometo, comenzarás a amar a Redux.

Redux es una biblioteca de gestión estatal que puede conectar con cualquier biblioteca de JavaScript, y no solo React. Sin embargo, funciona muy bien con React debido a la naturaleza funcional de React. Para entender esto mejor, echemos un vistazo al estado.

Any change in the state rerenders the component and any user interaction updates the state

Como puede ver, el estado de un componente determina qué se procesa y cómo se comporta. La aplicación tiene un estado inicial y cualquier interacción del usuario desencadena una acción que actualiza el estado. Cuando se actualiza el estado, la página se reintegra.

Con React, cada componente tiene un estado local al que se puede acceder desde dentro del componente, o puede pasarlos como accesorios a los componentes secundarios. Usualmente usamos el estado para almacenar:

  1. IU estado y datos transitorios. Esto incluye una lista de elementos de UI para el menú de navegación o entradas de formulario en un componente controlado.
  2. Estado de la aplicación, como datos obtenidos de un servidor, el estado de inicio de sesión del usuario, etc.

Almacenar datos de aplicaciones en el estado de un componente está bien cuando tienes una aplicación básica de React con algunos componentes.

React Project with a few components
Jerarquía de componentes de una aplicación básica

Sin embargo, la mayoría de las aplicaciones de la vida real tendrán muchas más características y componentes. Cuando aumenta el número de niveles en la jerarquía de componentes, la administración del estado se vuelve problemática.

Component hierarchy of a chat application using React
Boceto de una aplicación de tamaño mediano

¿Por qué deberías usar Redux?

Aquí hay un escenario muy probable que podría encontrarse al trabajar con React.

  1. Está construyendo una aplicación de tamaño mediano, y tiene sus componentes prolijamente divididos en componentes inteligentes y tontos.
  2. Los componentes inteligentes manejan el estado y luego los pasan a los componentes tontos. Se encargan de hacer llamadas API, obtener los datos de la fuente de datos, procesar los datos y luego establecer el estado. Los componentes tontos reciben los accesorios y devuelven la representación de UI.
  3. Cuando está a punto de escribir un nuevo componente, no siempre está claro dónde ubicar el estado. Podría dejar que el estado sea parte de un contenedor que sea el padre inmediato del componente de presentación. Mejor aún, podría mover el estado más arriba en la jerarquía para que el estado sea accesible para múltiples componentes de presentación.
  4. Cuando la aplicación crece, ves que el estado está disperso por todo el lugar. Cuando un componente necesita acceder al estado al que no tiene acceso de inmediato, intentará elevar el estado hasta el antecesor de componente más cercano.
  5. Después de refactorizar y limpiar constantemente, terminas con la mayoría de los lugares de retención estatales en la parte superior de la jerarquía de componentes.
  6. Finalmente, decide que es una buena idea dejar que un componente en la parte superior maneje el estado globalmente y luego pasar todo. Todos los demás componentes pueden suscribirse a los accesorios que necesitan e ignorar el resto.

Esto es lo que personalmente experimenté con React, y muchos otros desarrolladores estarán de acuerdo. React es una biblioteca de vistas, y no es tarea de React administrar específicamente el estado. Lo que estamos buscando es el principio de Separación de preocupaciones.

Redux le ayuda a separar el estado de la aplicación de React. Redux crea una tienda global que reside en el nivel superior de su aplicación y alimenta el estado a todos los demás componentes. A diferencia de Flux, Redux no tiene múltiples objetos de tienda. El estado completo de la aplicación se encuentra dentro de ese objeto de la tienda, y podría intercambiar la capa de vista con otra biblioteca con la tienda intacta.

Los componentes se vuelven a renderizar cada vez que se actualiza la tienda, con muy poco impacto en el rendimiento. Esas son buenas noticias, y esto trae consigo toneladas de beneficios. Puede tratar todos sus componentes React como tontos, y React puede centrarse solo en el lado de la vista.

Ahora que sabemos por qué Redux es útil, profundicemos en la arquitectura de Redux.

La arquitectura Redux

Cuando estás aprendiendo Redux, hay algunos conceptos básicos a los que debes acostumbrarte. La imagen a continuación describe la arquitectura Redux y cómo todo está conectado.

Getting started with Redux Redux Architecture
Redux en pocas palabras

Si está acostumbrado a Flux, algunos de los elementos pueden parecerle familiares. Si no, está bien también porque vamos a cubrir todo desde la base. Primero, asegúrese de tener instalado el redux:

Use create-react-app o su configuración de paquete web favorita para configurar el servidor de desarrollo. Debido a que Redux es una administración estatal independiente, no vamos a conectar React todavía. Así que elimine el contenido de index.js, y jugaremos con Redux para el resto de este tutorial.

Tienda

La tienda es un gran objeto JavaScript que tiene toneladas de pares clave-valor que representan el estado actual de la aplicación. A diferencia del objeto de estado en React que se rocía en diferentes componentes, solo tenemos una tienda. La tienda proporciona el estado de la aplicación, y cada vez que el estado se actualiza, la vista vuelve a aparecer.

Sin embargo, nunca puedes mutar o cambiar la tienda. En cambio, creas nuevas versiones de la tienda.

Debido a esto, puede hacer un viaje en el tiempo a través de todos los estados desde el momento en que se inició la aplicación en su navegador.

La tienda tiene tres métodos para comunicarse con el resto de la arquitectura. Son:

  • Store.getState (): para acceder al árbol de estado actual de su aplicación.
  • Store.dispatch (action): para activar un cambio de estado en función de una acción. Más sobre las acciones a continuación.
  • Store.subscribe (listener): para escuchar cualquier cambio en el estado. Se llamará cada vez que se envíe una acción.

Vamos a crear una tienda. Redux tiene un método createStore para crear una nueva tienda. Necesitas pasarle un reductor, aunque no sabemos qué es eso. Entonces crearé una función llamada reductor. Opcionalmente, puede especificar un segundo argumento que establezca el estado inicial de la tienda.

src/index.js

Ahora vamos a escuchar cualquier cambio en la tienda, y luego console.log () el estado actual de la tienda.

Entonces, ¿cómo actualizamos la tienda? Redux tiene algo llamado acciones que hacen que esto suceda.

Creadores de Acción / Acción

Las acciones también son objetos simples de JavaScript que envían información desde su aplicación a la tienda. Si tiene un contador muy simple con un botón de incremento, al presionarlo se generará una acción que se ve así:

Ellos son la única fuente de información para la tienda. El estado de la tienda cambia solo en respuesta a una acción. Cada acción debe tener una propiedad de tipo que describa qué pretende hacer el objeto de acción. Aparte de eso, la estructura de la acción depende completamente de ti. Sin embargo, mantenga su acción pequeña porque una acción representa la cantidad mínima de información requerida para transformar el estado de la aplicación.

Por ejemplo, en el ejemplo anterior, la propiedad type se establece en "INCREMENT" y se incluye una propiedad de carga adicional. Podría cambiar el nombre de la propiedad de carga a algo más significativo o, en nuestro caso, omitirlo por completo. Puede enviar una acción a la tienda de esta manera.

Mientras codifica Redux, normalmente no usará acciones directamente. En cambio, llamarás a funciones que devuelven acciones, y estas funciones se conocen popularmente como creadores de acciones. Aquí está el creador de acciones para la acción de incremento que discutimos anteriormente.

Por lo tanto, para actualizar el estado del contador, deberá enviar la acción incrementCount de la siguiente manera:

Si te diriges a la consola del navegador, verás que está funcionando, parcialmente. Nos volvemos indefinidos porque aún no hemos definido el reductor.

Browser console returns undefined for getState

Entonces ahora tenemos acciones cubiertas y la tienda. Sin embargo, necesitamos un mecanismo para convertir la información proporcionada por la acción y transformar el estado de la tienda. Los reductores sirven para este propósito.

Reductores

Una acción describe el problema, y el reductor es responsable de resolver el problema. En el ejemplo anterior, el método incrementCount devolvió una acción que proporcionaba información sobre el tipo de cambio que queríamos hacer al estado. El reductor usa esta información para actualizar realmente el estado. Hay un gran punto destacado en los documentos que siempre debes recordar al usar Redux:

Teniendo en cuenta los mismos argumentos, un reductor debe calcular el siguiente estado y devolverlo. No hay sorpresas. Sin efectos secundarios. No hay llamadas API. Sin mutaciones Solo un cálculo.

Lo que esto significa es que un reductor debe ser una función pura. Dado un conjunto de entradas, siempre debe devolver el mismo resultado. Más allá de eso, no debería hacer nada más. Además, un reductor no es el lugar adecuado para los efectos secundarios, como realizar llamadas AJAX o obtener datos de la API.

Llenemos el reductor para nuestro contador.

El reductor acepta dos argumentos-estado y acción-y devuelve un nuevo estado.

El estado acepta un valor predeterminado, initialState, que se usará solo si el valor del estado no está definido. De lo contrario, se conservará el valor real del estado. Usamos la instrucción switch para seleccionar la acción correcta. Actualice el navegador y todo funciona como se espera.

Agreguemos un caso para DECREMENT, sin el cual el contador está incompleto.

Aquí está el creador de acción.

Finalmente, envíelo a la tienda.

Eso es todo !

Resumen

Este tutorial fue un punto de partida para administrar el estado con Redux. Cubrimos todo lo esencial para comprender los conceptos básicos de Redux, como la tienda, las acciones y los reductores. Hacia el final del tutorial, también creamos un contador de demostración de reducción de trabajo. Aunque no fue mucho, aprendimos cómo encajan todas las piezas del rompecabezas.

En los últimos años, React ha crecido en popularidad. De hecho, tenemos varios artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si busca recursos adicionales en React, no dude en consultarlos.

En el próximo tutorial, haremos uso de las cosas que hemos aprendido aquí para crear una aplicación React usando Redux. Estén atentos hasta entonces. Comparte tu opinión en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.