Debemos aprender redux?

September 15, 2018

...

Ya sabes un poco de React, y otros desarrolladores empiezan a discutir de distintas librerías, mobx, redux o hasta incluso utilizar el mismo React para manejar el estado. Acá le daremos un vistazo a redux!

Que es redux?

Redux es un contenedor de estado predecible escrito en Javascript el cual modifica el estado basado en el patrón publish/subscribe utilizando funciones puras.

Suena a mucha información?, una función pura es una función completamente predecible la cual no importa cuantas veces la llamemos sabremos exactamente que nos devolverá, como una función que suma 2 números. Si a la función le pasamos el 2 y el 4 esta siempre nos devolverá 6. Pero si escribimos una función que nos retorne la fecha o un número aleatorio... sabremos que nos devolverá un número y también una fecha, pero nunca sabremos con exactitud que fecha y que número. Estas funciones son llamadas impuras y son las más dificiles de testear.

Publish/subscribe es el patrón donde los interesados se suscriben a un evento (como a una lista de correo) y cuando ocurre un evento, este es publicado o despachado e inmediatamente notifica a los interesados (como cuando te llega el correo finalmente).

Si bien puede sonar a mucha información dejame decirte de que es muy sencillo de entender una vez que logras observar el patrón circular que tiene el desarrollo con esta librería.

Vamos a ver lo siguiente: Imagina que tienes los datos de tu aplicación en el cliente guardado dentro del estado. Luego mediante una acción del usuario esta actualiza el estado mediante una función pura lo que gatilla que la vista se actualice y puedas ver reflejada la nueva vista con los datos nuevos del estado. Simple no? aunque no lo creas lo más probable es que esto ya lo has estado haciendo con otras librerías o frameworks. Pero redux está enfocado en actualizar los datos del estado y también en otras cosas más que nos pueden ayudar a hacer la vida del desarrollador más simple.

Lo primero:

Tenemos las acciones. Estas son simples constantes escritas como un string que indican la acción que se está llevando a cabo:

const ADD = 'contador/suma'

Sencillísimo!

Segundo:

Tenemos los action creators, este es un nombre bastante grande para decirle a una función que te devuelve un objeto:

const add = payload => ({
  type: ADD,
  payload,
})

Lo ves? simplemente retorna un objeto que indica la acción que se va a ejecutar y los datos que debe transportar. Hasta ahora ya tenemos la acción a despachar o notificar.

Tercero:

Estas acciones son despachadas por el método dispatch que nos entrega redux.

dispatch(add(1))

Cuarto:

Esto hará que todos nuestros reducers se ejecuten para calcular el nuevo estado:

function reducer(state, action) {
  switch(action.type) {
    case ADD: {
      return state + 1
    }
    default: {
      return state
    }
  }
}

Quinto:

No hay quinto paso, ya sabes como funciona el flujo con redux!

Espero que este acercamiento a la librería te haya gustado y si quieres aprender más sobre ella puedes darte una vuelta por su documentación pero si crees que necesitas un curso sin grasa para ser productivo de forma inmediata puedes ver este curso en udemy con un cupón de descuento a 9.99 USD donde se aborda React, React Router, Redux, Redux-Form y optimizaciones para ahorrar hasta un 90% del código que se escribe.


Suscríbete

Suscríbete a la lista para más cursos, posts y videos tutoriales. Prometo no enviarte más de un correo semanal 🙏

Creado por Nicolás Schürmann ingeniero e instructor de software. Cuando no está programando, esta frente a una cámara dictando cursos, creyéndose youtuber o apoyando a sus alumnos. Puedes seguirlo en twitter o también suscribirte a su canal de youtube. Considera comprar sus cursos por este medio y así apoyas al instructor.