Los principos de Redux

Redux es un manejador de estado que nos ayuda a crear mejores aplicaciones en JavaScript, ¿Ya conoces los principios fundamentales de esta tecnología?

Los principios de Redux

Antes de elegir Redux como tu manejador de estado tienes que tener en cuenta la complejidad que le puedes añadir a tu proyecto, para tomar la mejor decisión es fundamental que conozcas los 3 principios de redux que aquí te cuento.

Única fuente de la verdad

​ Se refiere a que todo el estado se representa como un objeto de JavaScript, se le conoce como state tree, ya que un único árbol almacena todo el estado en un único store, veamos un ejemplo con la lista del mercado: ​

{
  mercado: [
    {
      name: 'Zanahorias',
      comprado: true,
    },
    {
      name: 'Sandia',
      comprado: false,
    },
  ],
}

El estado es de solo lectura

​ Se refiere a que la única forma de modificar el estado es emitiendo una acción, un objeto describiendo que pasó, este objeto siempre debe llevar el atributo type, un ejemplo con nuestra lista del mercado: ​

{
  type: 'ADD_VEGETABLE',
  name: 'Lechuga'
}

Utiliza funciones puras para hacer cambios

​ Las funciones puras tienen que cumplir con 2 requisitos: ​

• Dados valores de entrada de idéntico valor, la función siempre devolverá el mismo valor.
• El cómputo de la función no implica ningún efecto colateral observable fuera de ella. ​ Si te suenan raras las funciones puras vamos a verlas con un ejemplo sencillo.

function funcionPura(a, b) {
  return a + b;
}
console.info(funcionPura(1, 5));
// 6

​ ¿Qué podemos destacar?

Siempre que invoquemos está función con los mismos parámetros, el resultado debería ser el mismo, como no depende de un valor o estado fuera de ella, el resultado debe ser siempre el mismo. ​

El cómputo que se realiza dentro de la función, no afecta nada fuera de ella, tampoco los parámetros que recibe así que a y b no son mutados en el cómputo, lo que nos da una pista de una ventaja de las funciones puras la inmutabilidad.

​ Si aún no te quedan claras pongamos otro ejemplo:

function elMejorDesayuno (a, b)  {
  return a + b;
}
console.info(elMejorDesayuno(cereal, leche));
// Cereal con Leche

​ Si piensas que la leche va primero definitivamente aún no has entendido las funciones puras porque no hay nada más impuro que eso. ​

Redux puede parecer intimidante, domínalo con esta clase gratuita, no vas a aprender a usarlo pero si vas a crear tu propio Redux entendiendo todo su funcionamiento por dentro.

This is your title