Patrón de reacción: PropTypes centralizados

Evite repetirse centralizando PropTypes

Hay tres formas populares de manejar tipos en React: PropTypes, TypeScript y Flow. Esta publicación trata sobre PropTypes, que actualmente son los más populares.

? Para hacer cumplir los tipos en React, normalmente uso ... # react

RT es apreciado

- Cory House (@housecor) 23 de septiembre de 2017

Dado que PropTypes proporciona advertencias de tipo en tiempo de ejecución, es útil ser lo más específico posible.

  • ¿El componente acepta un objeto? Declara la forma del objeto.
  • ¿Prop solo acepta una lista específica de valores? Utilice oneOf.
  • ¿La matriz debe contener números? Utilice arrayOf.
  • Incluso puede declarar sus propios tipos. AirBnB ofrece muchos PropTypes adicionales.

Aquí hay un ejemplo de PropType:

UserDetails.propTypes = { user: PropTypes.shape({ id: PropTypes.number.isRequired, firstName: PropTypes.string.isRequired, lastName: PropTypes.string.isRequired, role: PropTypes.oneOf(['user','admin']) };

En aplicaciones reales con objetos grandes, esto conduce rápidamente a una gran cantidad de código. Eso es un problema, porque en React, a menudo pasarás el mismo objeto a varios componentes . La repetición de estos detalles en varios archivos de componentes rompe el principio DRY (no se repita). Repetirse crea un problema de mantenimiento.

¿La solución? Centraliza tus PropTypes .

Aquí se explica cómo centralizar PropTypes

Prefiero centralizar PropTypes en /types/index.js.

Estoy usando importaciones con nombre en la línea 2 para acortar las declaraciones. ?

Y así es como uso el PropType que declaré anteriormente:

// types/index.js import { shape, number, string, oneOf } from 'prop-types'; export const userType = shape({ id: number, firstName: string.isRequired, lastName: string.isRequired, company: string, role: oneOf(['user', 'author']), address: shape({ id: number.isRequired, street: string.isRequired, street2: string, city: string.isRequired, state: string.isRequired, postal: number.isRequired }); });

Utilizo una importación con nombre para obtener una referencia a la declaración PropType exportada en la línea 2. Y la puse en uso en la línea 13.

Beneficios :

  1. PropType centralizado simplifica radicalmente la declaración PropType del componente. La línea 13 solo hace referencia al PropType centralizado, por lo que es fácil de leer.
  2. El tipo centralizado solo declara la forma, por lo que aún puede marcar el accesorio según sea necesario.
  3. No más copiar / pegar. Si la forma del objeto cambia más tarde, tiene un único lugar para actualizar. ?

Aquí hay un ejemplo de trabajo en CodeSandbox.

Crédito adicional: Genere sus PropTypes

Finalmente, considere escribir código personalizado para generar sus declaraciones PropType a partir de su código del lado del servidor. Por ejemplo, si su API está escrita usando un lenguaje fuertemente tipado como C # o Java, considere generar sus declaraciones PropType como parte de su proceso de construcción de API del lado del servidor leyendo la forma de sus clases del lado del servidor. De esta manera, no tiene que preocuparse por mantener sincronizados sus PropTypes del lado del cliente y el código API del lado del servidor. ?

Nota al margen: si conoce un proyecto que hace esto para cualquier idioma del lado del servidor, responda en los comentarios y agregaré un enlace aquí.

Editar : puede convertir JSON en PropTypes usando transform.now.sh. ?

Resumen

  1. Declare sus PropTypes de la manera más explícita posible, para saber cuándo ha cometido un error.
  2. Centralice sus PropTypes para evitar que se repita.
  3. Si está trabajando en un lenguaje fuertemente tipado en el servidor, considere generar sus PropTypes leyendo su código del lado del servidor. Esto asegura que sus PropTypes coincidan con los tipos del lado del servidor.

¿Busca más información sobre React? ⚛️

Soy autor de varios cursos de React y JavaScript en Pluralsight (prueba gratuita).

Cory House es autor de varios cursos sobre JavaScript, React, código limpio, .NET y más sobre Pluralsight. Es consultor principal en reactjsconsulting.com, arquitecto de software en VinSolutions, MVP de Microsoft, y capacita a los desarrolladores de software a nivel internacional en prácticas de software como desarrollo de front-end y codificación limpia. Cory tuitea sobre JavaScript y desarrollo front-end en Twitter como @housecor.