React – Código recurrente, ¿Qué hacer?

Hola a tod@s, cuando programamos muchas veces reutilizamos código para realizar peticiones o validaciones en cada archivo o componente que vamos creando y cuando tenemos que modificar algo, hay que cambiarlo en todos los sitios que lo hemos utilizado. Esto es un problema y no es practico ni productivo. Entonces, ¿Qué podemos hacer para no tener que repetir tanto código y que se quede lo más limpio posible? Pues vamos a verlo.

¿Qué podemos hacer?

Una de la formas más aconsejables es crear un objeto donde se incorporen propiedades y métodos de una misma temática. Por ejemplo, si tienes que realizar acciones sobre un usuario, peticiones a una API, etc..

¿Cómo lo creamos?

La forma más sencilla de crear un objeto en React seria mediante una variable de tipo const, let o var en un solo fichero y exportándola para que se pueda utilizar, una vez importada, en el componente que queramos.

Un ejemplo seria configurar un objeto para administrar el token de un usuario.

   const Token = {
      
      saveToken: function (token){
          //code to save Token in localstorage, cookies, bbdd, etc..
      },

      getToken: function (){
          // code to get Token of localstorage, cookies, bbdd, etc..
      },

      removeToken: function (token){
         // code to remove Token of localstorage, cookies, bbdd, etc..  
      },

      verifyToken: function (){
         // code to verify Token of localstorage, cookies, bbdd, etc..  
      },
   }

   export default Token;

En este ejemplo puedes ver que el objeto está compuesto solo por funciones, es decir, métodos. Aunque, si fuera necesario, también podrías crear propiedades si fuera necesario de cualquier tipo existente (boolean, string, int, object, array, …).

Si, por ejemplo, necesitaras un token por defecto se podría insertar en el objeto anterior lo siguiente:

      defaultToken: "xxxxxxxxxxxxxxx",

Explicación del objeto

Como se puede ver, el objeto dispone de un nombre de tipo const ya que no dispone de propiedades y métodos modificables. Aunque como hemos comentado antes podria ser de tipo let o tipo var tambien.

También puedes comprobar que, como cualquier objeto, dispone de unas claves (keys) como saveToken, getToken, removeToken, verifyToken y cada clave o key, en vez de asignarles un valor, le asignamos una función.

Estas funciones puede requerir parámetros, como saveToken y removeToken. Otras, en cambio, no necesitan parámetros como verifyToken o getToken.

Además para que dicho objeto se pueda leer desde un componente hay que exportarlo con la opción export default Token. De esta forma se podrá importar al componente que queramos

Hay que tener en cuenta…

… varias cosas:

• como en cualquier objeto, las claves tienen que ir separadas por comas.
• Si es necesario llamar una propiedad o método dentro de otra, hay que utilizar la palabra this para hacer referencia al objeto en si y no a una variable interna de la función. Un ejemplo seria: this.getToken()
• Si en alguna función haces alguna llamada a una API o no sabes cuanto va a tardar en responder, recuerda utilizar async await para que el código se espere a la respuesta. En caso contrario, podrías tener errores ya que si recuerdas, javaScript es asíncrono.
• acuérdate en exportarlo, en caso contrario, no podrás utilizarlo

¿Cómo importarlo y usarlo?

Una vez creado el objeto, si queremos utilizarlo en algún componente o página se tendrá que realizar una importación de la siguiente forma:

      import Token from 'rutadondeseencuentraelobjeto'

Una vez importado, podrás utilizarlo de dos formas:

1. Utilizando Token junto a la propiedad o método que quieras.

   
   Token.getToken()

2. Desestructurando Token en los componentes que vaya a utilizar y llamarlos directamente

   const { getToken } = Token;
   getToken();
   

En conclusión…

… realizar un objeto con código recurrente ayuda a simplificar el código, que sea todo más legible y organizar mejor el proyecto.

Espero que te haya gustado y te haya aportado.

Si tienes cualquier pregunta, puedes dejar un comentario o puedes rellenar el formulario de contacto.

Hasta pronto.