Guía para principiantes para reaccionar / reducir: cómo comenzar a aprender y no sentirse abrumado

Foto de Roman Mager en Unsplash

Descargo de responsabilidad: esta es una guía para principiantes escrita por un principiante React / Redux.

Aprender un nuevo marco Javascript en 2017 puede ser una tarea desalentadora. Digamos que finalmente se encontró con Angular, pero todos se han mudado a esta nueva cosa brillante llamada React. Leyó un par de tutoriales y no puede esperar para configurar su nuevo proyecto React. Espere, hay otro artículo que dice que debe usar Redux para administrar el estado de su nueva aplicación. Los principiantes pueden relacionarse con este artículo. Me considero un desarrollador intermedio y todavía me siento así.

Cuando intenté iniciar mi proyecto React / Redux, hojeé innumerables artículos sobre cómo estructurar mi directorio de archivos: archivos agrupados por tipo, agrupados por componentes, agrupados por dominio ... etc.

fuente: http://gph.is/2k9DFT4

Me di cuenta de que tenía que comenzar en alguna parte. El momento ajá vendría más tarde. En el proceso, entendería los pros y los contras de cada enfoque. Puede ser seguido por una refactorización dolorosa, pero será una valiosa lección aprendida. Y estaba construyendo para aprender de todos modos.

Paso 1: elija un enfoque obstinado y manténgalo

Seguí este tutorial.

Mi enfoque de aprendizaje fue comenzar a codificar mi propia aplicación siguiendo el proceso de pensamiento del autor. Me parece que el artículo es uno de los tutoriales más útiles que existen. Todavía puede ser demasiado para alguien que comienza en React / Redux, así que documenté mi viaje y lo convertí en una versión recortada del tutorial.

Paso 2: Comience pequeño

Mi objetivo era realmente simple al principio: presentar una lista de artículos que he estado recopilando con una aplicación de agregación de noticias. La respuesta de la base de datos de noticias será una colección de artículos con la siguiente estructura de datos.

Renderizar una lista de artículos sobre Ethereum

Paso 3: elige una repetitiva

Utilicé el repetitivo creado por mis adorables instructores en Fullstack Academy. (No cogí el tren React / Redux allí. Mi cohorte es el último en aprender AngularJS) Elegí este repetitivo porque usa javascript fullstack: React / Redux para el front end y Express / Sequelize / PostgreSQL para el backend. Para el propósito de este ejercicio, he limpiado un poco la placa repetitiva para que la gente sin Express / Sequelize / PostgreSQL pueda seguirla. A partir de ahora solo trabajaremos con React / Redux.

Aquí está el repositorio que contiene el punto de partida y el código finalizado para este ejercicio.

Esta es la estructura del archivo.

src /
  componentes /
    ListView.js
    ListRow.js
  contenedores /
    ArticlesIndex.js
  servicios/
    articulos.js
  almacenar/
    artículos/
      actions.js
      actionTypes.js
      reducer.js
    index.js

Antes de seguir este tutorial, si términos como acción y reductor no suenan, le recomiendo que lea el concepto central en la documentación oficial de Redux o el artículo que escribí:

Paso 4: Comience con el estado Redux

¿Qué estado tiene nuestra aplicación? Estamos hablando de una aplicación simple de una página con una lista de artículos. Necesitamos almacenar la lista de artículos recuperados del servidor. Si echas un vistazo a los artículos.js en src / services / articles, verás una matriz llena de artículos. Dado que el propósito de este ejercicio es familiarizarse con el flujo de datos de la arquitectura React / Redux, la función getAllArticles () devuelve directamente los artículos que necesitamos. En el mundo real, esta función será una llamada asincrónica a alguna API remota.

Ahora la pregunta es cómo estructurar nuestro estado. La respuesta del servidor (o en este caso, la función getAllArticles) es una matriz de objetos. Podemos ponerlo en nuestro estado.

¿Pero es esta la mejor manera de modelar el estado? Considere el escenario en el que debe actualizar una entrada de artículo, la aplicación va a recorrer en iteración la matriz para encontrar las noticias que está buscando. ¿Qué pasa si el tamaño de la matriz es realmente grande? Este enfoque no va a ser muy eficaz.

Si estructuramos nuestro estado con un objeto, acceder a un artículo se convierte en una búsqueda. Para renderizar artículos, podemos almacenar una matriz adicional de identificadores.

Paso 5: Implemente el flujo de datos para su estado de principio a fin

¿Cómo actualizamos este estado? Aquí es donde intervienen la acción y el reductor. Considere este diagrama de flujo:

¿Cuál es nuestra interacción con el usuario? Queremos presentar la lista de artículos al cargar la página, por lo que no es una gran interacción. Para hacer esto, comenzamos con componentDidMount en la vista React. Podemos enviar una acción para recuperar artículos y notificar al reductor. El reductor evaluará la acción y actualizará el estado. El estado actualizado activará el componente para renderizar.

Comencemos por definir el tipo de acciones que tiene nuestra aplicación. Es una definición constante simple para buscar artículos. Más adelante, siempre podemos agregar más definiciones, como actualizar una entrada o eliminar una entrada.

Ahora vamos a la acción. Recuerda que la respuesta que obtenemos del backend es una matriz de objetos, la convertimos en un objeto usando la función lodash keyBy.

El reductor evalúa el objeto simple que contiene el tipo de acción y su carga útil. Luego almacena los datos en el estado.

Paso 6: renderizar

Vamos a conectar un contenedor llamado ArticleIndex al estado del artículo. AritcleIndex es un contenedor inteligente que puede comunicarse con la tienda Redux. Dentro de ArticleIndex, hay un componente tonto llamado ListView, escrito por Tal Kol, el autor del tutorial de Redux que seguí. Puede verificar la implementación en la carpeta de componentes.

ListView toma los artículos por Id., Una matriz de identificadores de artículo y una función de representación. Luego presenta la lista de artículos.

¿Cómo obtenemos articlesById y una variedad de identificadores de artículos para ver? Aquí hay una revisión del concepto central de Redux. La vista de reacción está conectada al estado de Redux a través de la función de conexión proporcionada por la biblioteca react-redux.

Aquí está el código que hace lo que describe este diagrama. En la parte inferior, mapeamos el estado de Redux y lo enviamos a React props. En componentDidMount, invocamos loadArticles, que distribuye la acción fetchAllArticles. Una vez que el estado se actualiza con los artículos, se envía articlesById a la vista Reaccionar mediante mapStateToProps.

¡Y eso es! ¡Tenemos una lista de artículos en nuestro navegador!

Paso 7: ¿Anti-patrón en algún lugar del código?

En aras del aprendizaje del flujo de datos en React / Redux, hasta ahora hemos pasado por alto otro concepto de Redux. El componente React debe acceder al estado de Redux a través de selectores. Los selectores generalmente se encuentran en archivos reducer.js. Son funciones puras que acceden al estado de Redux y devuelven algunas propiedades de estado. Con los selectores en su lugar, si modifica uno de los estados de Redux que afecta a más de un componente, solo necesita actualizar el selector.

Aquí está nuestro selector getArticles:

La función mapStateToProps en ArticleIndex.js se convierte en:

Bonificación: siga el mismo proceso de pensamiento y cree un filtro

Con una lista de artículos, podemos agregar un montón de operaciones diferentes. Por ejemplo, los artículos son todas noticias sobre Ethereum. Se clasifican en dos tipos: noticias de la comunidad de criptomonedas y noticias de los principales medios de comunicación. Después de representar la lista de artículos, agregué un filtro de tipo usando el mismo proceso de pensamiento.

Enjuagar, repetir, refactorizar

Learning React / Redux es como saltar a una madriguera de conejo, pero me ha cambiado de escéptico a creyente. Espero que este artículo impulse tu aprendizaje.

¡Desde el primer paso inicial, mi proyecto de aprendizaje se ha convertido en un agregador de noticias y una aplicación de seguimiento de tendencias!

¡Gracias por leer!

Si estás en Steemit, las redes sociales de blockchain (algo así como el hijo amoroso de Reddit y Medium), pasa por aquí: