19. Primeros pasos con Redux

Empiezo por el final, que es compartiendo el código que tengo ahora mismo aislado en CodeSandbox. Es un ejemplo mítico en el mundo de la tecnología: un contador.

Puedes ver y ejecutar en este Codepen con un contador de ejemplo.

No pretendo hacer aquí una introducción rigurosa, sino compartir los puntos claves de este descubrimiento personal del mágico mundo de la programación en cliente con React.

¿Qué es Redux?

Es una librería de JavaScript independiente de React. Otra cosa es que luego, gracias a react-redux se entiendan de maravilla.

Dice la definición oficial en castellano que es un contenedor predecible del estado de las aplicaciones.

Dicho de otras palabras. Si incorporas Redux a tus desarrollos tendrás la vida más fácil a la hora de gestionar estados y cambios de estado, despreocupándote de cosas como las actualizaciones del render.

¿Por qué es difícil de entender?

Porque incorpora conceptos nuevos y magia. Al menos para mi, que soy un anciano backender acostumbrado a que las cosas pasan en la web después de recargar la página entera.

Obedece su creación a las necesidades creadas de las aplicaciones construidas en el cliente en base a JavaScript.

Incluímos en el vocabulario del desarrollo conceptos como Actions, Reducers o Middlewares. La forma de interconectarlos con la aplicación es lo que lo convierte en algo más complicado.

Eso si, en la documentación y los cientos de ejemplos que vas a encontrar, se hace un esfuerzo ímprobo para que entiendas como funciona.

Cuidado también con otra cosa. ¿Cuánto JavaScript sabes de verdad? El aprendizaje de Redux te va a sacar los colores, probablemente my friend.

¿Por dónde empiezo?

El código está más avanzado de lo que vamos a explicar aquí, pero espero que no te interfiera.

Por las acciones o Actions.

const increment = () => {
  return { type: "INCREMENT" };
};
const decrement = () => {
  return { type: "DECREMENT" };
};
const reset = () => {
  return { type: "RESET" };
};

Cada acción hace lo que parece. Podríamos incorporar como segundo valor de cada objeto un payload.

Ahora vamos al Reducer.

function counter(count = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return count + 1;
    case 'DECREMENT':
      return count - 1;
    case 'RESET':
      return 0;      
    default:
      return count;
  }
}

Por lo que ves está bastante claro que lo que en la Action se define como un type es lo que luego en el Reducer nos hace distinguir entre unas cosas u otras. El count es el valor del contador, que efectivamente, estará almacenado en el store. El valor inicial el cero, luego "tocaremos" ese valor cuando enviemos una acción.

A continuación tendremos cosas como estas:

var store = Redux.createStore(counter);
function render() {
  document.querySelector('#counter').innerText = store.getState();
}
store.subscribe(render);
render();

Fíjate que estamos trabajando con Vanilla JavaScript. Ni rastro de React de momento.

Creamos el store con nuestro counter como Reducer. Ahí se va a almacenar el estado, pero también las normas que permiten modificarlo (¿no te recuerda esto sospechosamente al blockchain?).

Luego suscribimos el render de la aplicación (lo que dice que se pinta y donde en el HTML) y lanzamos el render() en sí.

A continuación unimos todo, con los disparadores de las acciones gracias al dispatch:

document.querySelector('#increment').addEventListener('click', function(){
  store.dispatch(increment())
});
document.querySelector('#decrement').addEventListener('click', function(){
  store.dispatch(decrement())
});
document.querySelector('#reset').addEventListener('click', function(){
  store.dispatch(reset())
});

Fácil y sencillo, ¿verdad? 😉

Mañana veremos que cuando metemos React de por medio la cosa se pone emocionante.