Cómo desarrollar tus superpoderes de React con el patrón de contenedor

¡Hola a todos! ?

Esta vez les voy a contar sobre este patrón muy útil en React llamado patrón de contenedor o patrón de componente de contenedor .

Este es uno de los primeros patrones que aprendí. Me ayudó mucho separar los problemas en los más pequeños y resolverlos uno a la vez.

Además, definitivamente ayudó a que mi código fuera mucho más reutilizable y autónomo a la vez.

¡Puede parecer una paradoja! ¿Cómo consigue que su código sea reutilizable y autónomo al mismo tiempo?

Bueno, reutilizable porque aprendes a hacer pequeños componentes ficticios (de presentación) que puedes reutilizar mucho.

Autónomo porque el contenedor, la vista o lo que sea que esté usando para mantener toda su lógica se puede separar fácilmente de un lugar y adjuntar a cualquier otro sin grandes cambios / refactorización en su aplicación principal.

¡Así que esta es una superpotencia secreta y en la que todos ganan que debes adquirir tan pronto como puedas!

La verdad es que cuando quieres hacer una función, siempre comienzas de manera simple y limpia.

Los días pasan y puedes agregar una característica más pequeña aquí, una característica más allá. Estás haciendo un parche aquí, un parche allí, y todo tu código se vuelve complicado e inmanejable.

Créame, he estado ahí. ¡Y todavía estoy ahí hoy en día! Todos lo somos, en cierto punto, porque la programación es un oficio. Pero podemos minimizar eso mucho con la práctica y con este increíble patrón de diseño.

Pero, ¿qué es un patrón de diseño?

01. ¿Qué es un patrón de diseño de software?

Un patrón de diseño no es más que una solución general y reutilizable para un problema que ocurre comúnmente dentro de un contexto dado en el diseño de software. No es un diseño terminado que pueda transformarse directamente en código fuente o máquina. Es una descripción o plantilla sobre cómo resolver un problema que se puede utilizar en muchas situaciones diferentes.

Los patrones de diseño son las mejores prácticas formalizadas que el programador puede utilizar para resolver problemas comunes al diseñar una aplicación o un sistema.

¿Conoce el patrón de diseño del software MVC?

02. ¿Qué es el patrón de diseño MVC?

Bueno, MVC significa Model-View-Controller. Es un patrón arquitectónico utilizado para desarrollar interfaces de usuario. Divide la aplicación en tres partes interconectadas.

Tradicionalmente se usaba para GUI de escritorio (interfaces gráficas de usuario). Esta arquitectura se ha vuelto popular para diseñar aplicaciones web e incluso móviles.

Imagina que tienes un triángulo con tres vértices: Vista , Controlador y Modelo .

La vista es lo que el usuario ve en la pantalla (lado del cliente).

El usuario que ve la vista puede producir cambios, puede presionar un botón, completar un formulario, presionar reproducir para ver un video, activar una panoplia de cosas juntas.

El controlador maneja los cambios promovidos por el usuario y toda la lógica detrás. (Funciona como un retransmisor, solicita y maneja todo entre la Vista y el Modelo).

El modelo es el administrador. Contiene lo que se llama lógica empresarial, los datos. El modelo recibe información del controlador y procede a los cambios necesarios. Devuelve las actualizaciones al controlador y a la vista.

React es "una biblioteca de JavaScript para crear interfaces de usuario" (¿por definición?). La mayoría de las veces mezcla y manipula la V y parte de la C.

Y esa es esta V y esta C que queremos separar claramente del patrón del contenedor.

03. ¿Qué es el patrón de contenedor?

El Container Pattern es una solución para separar bastante bien la V de la C. En lugar de hacer solo una /> con la lógica y la vista, lo separas en dos: taine r /> y & lt; Component />. El primero hará todas las operaciones lógicas necesarias y promoverá la comunicación con la empresa, mientras que el segundo será un componente de presentación ficticio que rendirá lo que sea que exija su contenedor matriz.

Los componentes de presentación se refieren a cómo se ven las cosas . Mientras que los componentes del contenedor se preocupan por cómo funcionan las cosas .

04. Ensuciemos nuestras manos

Imagina que queremos hacer un componente de Lista de superhéroes que muestra algunos datos sobre ellos. Obtendremos los datos de una API y queremos mostrarlos en la pantalla.

De acuerdo, para simular nuestro modelo (base de datos), he creado un objeto de datos falso. Este objeto contiene la información de los superhéroes. También tiene una función fetchFarAwayAPI () que devolverá ese objeto.

Luego, creé un componente con estado para obtener la API, guardar la respuesta en el estado de nuestro componente y representar los datos en una tabla de arranque en la pantalla.

De acuerdo, hemos separado totalmente el controlador de la vista. Esta es la idea principal que debe tener en cuenta sobre el patrón del contenedor.

Si lo analiza detenidamente, hemos creado un componente donde obtenemos datos, los guardamos en el estado y los representamos en la pantalla. Hemos mezclado la C y la V. ¿De acuerdo?

Bien, ¿cómo resolvemos esto? ¡Sip! Patrón de contenedor!

¡Sígueme!

El primer paso es crear un componente de presentación para renderizar la vista. Este componente recibirá accesorios y lo renderizará. Es completamente tonto. Echar un vistazo:

Para manejar las cosas del controlador (lógica), he refactorizado nuestra antigua SuperHeroList y le cambié el nombre a SuperHeroListContainer.

Bien, hemos separado totalmente el controlador de la vista y esta es la idea principal que debe tener en cuenta sobre cuál es el patrón del contenedor.

Pero…

Podemos ir más allá y eliminar la complejidad de las filas del nuevo componente SuperHeroList. ¿Cómo lo hacemos? Creemos un nuevo componente SuperHeroRow:

¿Qué hemos hecho aquí? Hemos desacoplado la complejidad de la representación de filas fuera del componente SuperHeroList. Dejamos que el primero solo renderice la tabla e invocamos SuperHeroRow para renderizar cada una de las filas por separado.

Hemos extraído la complejidad de las filas a otro componente. Recuerde siempre que el patrón del contenedor está ahí (dentro de SuperHeroListContainer). Acabamos de dividir la representación en dos componentes padre / hijo que son completamente ficticios y de presentación utilizando la forma de trabajo preferida de React: ¡composición!

Tiene la libertad de extraer responsabilidades / complejidades en componentes más pequeños. ¡Así es como debes trabajar con React! Debe ajustarlo a lo que sea mejor para la aplicación, para el equipo, para el contexto en el que se encuentra.

¡A veces podemos abstraer un poco la cosa! Creo que a estas alturas estamos bien, pero ... vayamos un poco más lejos ...

Creemos una segunda SuperHeroList esta vez usando un HOC (Componente de orden superior).

Un componente de orden superior (HOC) es una técnica avanzada en React para reutilizar la lógica del componente. Los HOC no son parte de la API de React, per se. Son un patrón que surge de la naturaleza compositiva de React.

Concretamente, un componente de orden superior es una función que toma un componente y devuelve un nuevo componente.

La cosa aquí es refactorizar nuestro SuperHeroListContainer en una función de JavaScript de vainilla. Esta función toma un componente (comúnmente llamado WrappedComponent) y devuelve un nuevo componente.

Solo mira cómo lo he hecho a continuación:

Hemos refactorizado el en esta función llamada withContainer. Recibe cualquier componente que desee pasar a través de él y devuelve un componente de clase con toda la lógica dentro.

En este caso, la abstracción nos permite exportar múltiples tipos de tablas o reutilizar toda la lógica que teníamos en el contenedor para invocar múltiples / diferentes componentes presentacionales / ficticios.

¿Así es como juntamos la autocontención y la reutilización?

Por último, si bien no menos importante

No se preocupe si, al principio, tuvo dificultades para determinar cómo aplicar el patrón del contenedor. Es un proceso iterativo. Con práctica, llegarás sin pensar mucho. Será intuitivo y parecerá a primera vista el mejor enfoque para casi (90%) cualquier cosa que hagas en React.

React tiene un poderoso modelo de composición. Recomiendan usar la composición en lugar de la herencia para reutilizar el código entre componentes.

NOTA: Para este artículo he usado Create React App 2.0 con Bootstrap. Siempre puedes sacar mi repositorio aquí y hacer algunos experimentos más adelante. Encontrará las dos SuperHeroLists y los dos ejemplos que hemos realizado a lo largo del artículo.

Sigue leyendo mis artículos y no te olvides: ¡ siempre fuerte y codifica !

Bibliografía

  1. Reaccionar la documentación
  2. Contenedores de componentes de Learn React with chantastic ;
  3. Patrón de diseño de software, de wikipedia, la enciclopedia libre;
  4. Model-view-controller, de wikipedia, la enciclopedia libre;
  5. Patrones de presentación y contenedores, de Dan Abramov;

¡Muchas gracias!

evedes, octubre de 2018