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

Comenzando Con Redux: Aprende con el Ejemplo

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Redux te ayuda a administrar el estado estableciéndolo a un nivel global. En el tutorial anterior, echamos un bien vistazo a la arquitectura Redux y sus componentes integrales tales como acciones, creadores de acción, la tienda y reductores.

En esta segunda publicación de la serie, vamos a reforzar nuestro entendimiento de Redux y construir sobre lo que ya sabemos. Comenzaremos creando una aplicación realista Redux---una lista de contactos---que es más compleja que un contador básico. Esto te ayudará a fortalecer tu entendimiento del concepto de almacenamiento sencillo y múltiples reductores que introduje en el tutorial anterior. Después vamos a hablar sobre unir tu esto Redux con una aplicación React y las mejores prácticas que deberías considerar mientras creas un proyecto desde cero.

Sin embargo, está bien si no has leído la primera publicación----aún deberías poder seguir a la par mientras conozcas los básicos de Redux. El código para el tutorial está disponible en el repositorio, y puedes usarlo como punto de inicio.

Creando una Lista de Contacto Usando Redux

Vamos a construir una lista de contacto básica con las siguientes características:

  • mostrar todos los contactos
  • buscar contactos
  • traer todos los contactos desde el servidor
  • agregar un nuevo contacto
  • empujar nuevos datos de contacto hacia el servidor

Aquí está cómo va a lucir nuestra aplicación:

Getting Started With Redux Final View of the Contact List
Producto final --- Vista de lista de Contacto


Getting Started With Redux Final View of the Contact Form
Producto Final --- Vista Agregar contacto

Cubrir todo de una vez es difícil. Así que en esta publicación vamos a concentrarnos solo en la parte Redux de agregar un nuevo contacto y mostrar el contacto recién añadido. Desde una perspectiva Redux, vamos a inicializar el estado, creando el almacén, agregando reductores y acciones, etc.

En el siguiente tutorial, vamos a aprender cómo conectar React y Redux y enviar acciones desde un front-end React. En la parte final, llevaremos nuestro enfoque hacia hacer llamadas API usando Redux. Esto incluye recuperar los contactos desde el servidor y hacer una petición de servidor mientras agregamos nuevos contactos. Aparte de eso, también vamos a crear una característica de barra de búsqueda que te permita buscar todos los contactos existentes.

Crea un Bosquejo del Árbol de Estado

Puedes descargar la aplicación demo react-redux desde mi repositorio GitHub. Clona el repositorio y usa la rama v1 como un punto de partida. La rama v1 es muy similar a la plantilla create-react-app. La única diferencia es que he agregado unos cuántos directorios vacíos para organizar Redux. Aquí está la estructura de directorio.

De manera alternativa, puedes crear un nuevo proyecto desde cero. De cualquier modo, necesitarás tener instalado un boilerplate react y redux básicos antes de que puedas comenzar.

Es una buena idea tener un bosquejo del árbol de estado primero. En mi opinión, esto te ahorrará mucho tiempo a la larga. Aquí está un bosquejo aproximado del posible árbol de estado.

Nuestro almacén necesita tener dos propiedades---contacts y ui. La propiedad contacts se encarga de todos los estados relacionados con contactos, mientras que ui maneja estado específico de UI. No hay una regla definitiva en Redux que te impida colocar el objeto ui como un sub-estado de contacts. Siéntete libre de organizar tu estado de un modo que tenga sentido para tu aplicación.

La propiedad contacts tiene dos propiedades anidadas dentro---contactlist y newContact. El contactlist es un arreglo de contactos, mientras que newContact almacena temporalmente detalles de contacto mientras que el formulario de contacto es llenado. Voy a usar esto como un punto de inicio para construir nuestra asombrosa aplicación de lista de contactos.

Cómo Organizar Redux

Redux no tiene una opción sobre cómo estructurar tu aplicación. Hay unos cuántos patrones populares por ahí, y en este tutorial, hablaré de forma breve sobre algunos de ellos. Pero deberías elegir un patrón y apegarte a el hasta que comprendas completamente cómo todas las piezas están conectadas.

El patrón más común que encontrarás es la estructura de carpetas y archivos estilo Rails. Tendrás varios directorios de nivel superior como los de abajo:

  • componentes: Un lugar para almacenar los componentes React tontos. A estos componentes no les importa si estás usando Redux o no.
  • contenedores: Un directorio para los componentes React inteligentes que envían acciones al almacén Redux. El enlace entre redux y react se llevará a cabo aquí.
  • acciones: Los creadores de acción irán dentro de este directorio.
  • reductores: Cada reductor obtiene un archivo individual, y estarás colocando toda la lógica de reductor en este directorio.
  • almacén: La lógica para inicializar el estado y configurar el almacén irán aquí.

La imagen de abajo demuestra cómo podría lucir nuestra aplicación si seguimos este patrón:

Organising Folder structure in Redux

El estilo Rails debería funcionar para aplicaciones de tamaño pequeño y mediano. Sin embargo, cuando tu aplicación crece, puedes considerar moverte hacia la aproximación de estilo de dominio u otras alternativas populares que están cercanamente relacionadas al estilo de dominio. Aquí, cada característica tendrá un directorio propio, y todo lo relacionado a esa característica (dominio) estará dentro. La imagen de abajo compara las dos aproximaciones, estilo Rails en la izquierda y estilo de dominio en la derecha.

Comparison of two popular techniques for organising Redux and React

Por ahora, continua y crea directorios para componentes, contenedores, almacén, reductores y acción. Comencemos con el almacén.

Almacén Sencillo, Múltiples Reductores

Creemos un prototipo para el almacén y el reductor primero. Desde nuestro ejemplo anterior, así es como debería lucir nuestro almacén:

La declaración switch tiene tres casos que corresponden a tres acciones que estaremos creando. Aquí está una explicación breve de para lo que son las acciones.

  • HANDLE_INPUT_CHANGE: Esta acción se dispara cuando el usuario ingresa nuevos valores al formulario de contacto.
  • ADD_NEW_CONTACT: Esta acción se envía cuando el usuario envía el formulario.
  • TOGGLE_CONTACT_FORM: Esta es una acción UI que se encarga de mostrar/ocultar el formulario de contacto.

Aunque esta aproximación nativa funciona, a medida que la aplicación crece, usar esta técnica tendrá algunas desventajas.

  1. Estamos usando un reductor sencillo. Aunque un reductor sencillo suena bien por ahora, imagina tener toda tu lógica de negocio bajo un solo reductor muy grande.
  2. El código de abajo no sigue la estructura Redux que hemos discutido en la sección previa.

Para arreglar el asunto de reductor simple, Redux tiene un método llamado combineReducers que te permite crear múltiples reductores y después combinarlos en una sola función reductora. La función combineReducers mejora la legibilidad. Así que voy a partir el reductor en dos---un contactsReducer y un uiReducer.

En el ejemplo de arriba, createStore acepta un segundo argumento opcional el cuál es el estado inicial. Sin embargo, si vamos a partir los reductores, podemos mover todo el initialState a una nueva ubicación de archivo, digamos reducers/initialState.js. Después vamos a importar un subconjunto de initialState a cada archivo reductor.

Partiendo el Reductor

Reestructuremos nuestro código para arreglar ambos problemas. Primero, crea un nuevo archivo llamado store/createStore.js y agrega el siguiente código:

Después, crea un reductor raíz en reducers/index.js como sigue:

Finalmente, necesitamos crear el código para el contactsReducer y uiReducer.

reducers/contactsReducer.js

reducers/uiReducer.js

Cuando estás creando reductores, siempre ten lo siguiente en mente: un reductor necesita tener un valor por defecto para su estado, y y siempre necesita devolver algo. Si el reductor falla en seguir esta especificación, obtendrás errores.

Ya que hemos cubierto mucho código, echemos un vistazo a los cambios que hemos hecho con nuestra aproximación:

  1. La llamada combineReducers ha sido introducida para unir los reductores partidos.
  2. El estado del objeto ui será manejado por uiReducer y el estado de los contactos por el contactsReducer.
  3. Para mantener los reductores puros, han sido usado operadores de expansión. La sintaxis de tres puntos es parte del operador de expansión. Si no estás cómodo con la sintaxis de expansión, deberías considerar usar una biblioteca como Immutability.js.
  4. El valor inicial ya no es especificado como un argumento inicial para createStore. En su lugar, hemos creado un archivo separado para este llamado initialState.js. Estamos importando initialState y después estableciendo el estado por defecto haciendo state = initialState.ui.

Estado de inicialización

Aquí está el código para el archivo reducers/initialState.js.

Acciones y Creadores de Acción

Agreguemos un par de acciones y creadores de acción para añadir manejo de cambios de formulario, agregar un nuevo contacto, y cambiar el estado UI. Si recuerdas, los creadores de acción son solo funciones que devuelven una acción. Agrega el siguiente código en actions/index.js.

Cada acción necesita devolver una propiedad tipo. El tipo es como una llave que determina cuál reductor es invocado y cómo el estado se actualiza en respuesta a esa acción. La carga es opcional, y puedes de hecho llamar cualquier cosa que quieras.

En nuestro caso, hemos creado tres acciones.

El TOGGLE_CONTACT_FORM no necesita una carga porque cada vez que la acción es disparada, el valor de ui.isContactFormHidden se intercambia. Las acciones de valor Booleano no requieren una carga.

La acción HANDLE_INPUT_CHANGE es disparada cuando el valor del formulario cambia. Así qué, por ejemplo, imagina que el usuario está llenando el campo de email. La acción recibe entonces "email""bob@example.com" como entradas, y la carga entregada al reductor es un objeto que luce así:

El reductor usa esta información para actualizar las propiedades relevantes del estado newContact.

Enviar Acciones y Suscribiendo al Almacén

El siguiente paso lógico es enviar las acciones. Una vez que las acciones son enviadas, el estado cambia en respuesta a eso. Para enviar acciones y para obtener árbol de estado actualizado, Redux ofrece ciertas acciones de almacén. Estas son:

  • dispatch(action): Envía una acción que podría disparar potencialmente un cambio de estado.
  • getState(): Devuelve el árbol de estado actual de tu aplicación.
  • subscriber(listener): Un escuchador de cambio es llamado cada vez que una acción es enviada y alguna parte del árbol de estado es cambiada.

Ve al archivo index.js e importa la función configureStore y las tres acciones que creamos anteriormente:

Después, crea un objeto store y agrega un escuchador que registre el árbol de estado cada vez que una acción es enviada:

Finalmente, envía algunas acciones:

Si todo está funcionando bien, deberías ver esto en la consola de desarrollador.

Redux store being logged in developer console

¡Eso es! En la consola de desarrollador, puedes ver el almacén Redux siendo registrado, así que puedes ver cómo cambia después de cada acción.

Resumen

Hemos creado un esqueleto de aplicación Redux para nuestra asombrosa aplicación de lista de contactos. Aprendimos sobre reductores, partir reductores para hacer más limpia nuestra estructura de app, y escribir acciones para mutar el almacén.

Hacia el final de la publicación, suscribimos al almacén usando el método store.subscribe(). Técnicamente, esta no es la mejor manera de hacer las cosas si vas a usar React con Redux. Hay maneras más optimizadas de conectar el front-end react con Redux. Cubriremos esas en el siguiente tutorial.

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.