El estado en las aplicaciones de JavaScript

En estos primeros días del año he tenido ya un par de conversaciones sobre usar el estado en aplicaciones de JavaScript. Como es algo que estoy usando en mi trabajo diario (en React concretamente), voy a explicar lo básico para entender qué es esto del estado.

Todo el estado de la aplicación, es decir, los datos que utilizamos para su funcionamiento (variables, flags, arrays y objetos que generamos de los datos que leemos de APIs…) se almacena en un árbol que llamamos store. Este store no puede modificarse directamente, sino que tenemos que emitir acciones, objetos que describen que ocurre. ¿Cómo especificamos la transformación del store de esas acciones? Con reducers.

Sí, parece confuso, pero con un ejemplo sencillo verás que no lo es tanto:

Vamos a instalar Redux (https://es.redux.js.org/). El ejemplo que veremos será en React:

npm i -S redux

Instalamos la conexión a React y las herramientas de desarrollo (que se integran con el inspector del navegador):

npm i -S react-redux
npm i -D redux-devtools

El primer paso es importar createStore de Redux

import { createStore } from 'redux';

Y creamos el store almacenando el estado de la aplicación. El caso más sencillo para verlo es el de un contador al que sumaremos o restaremos 1.

let store = createStore(counter);

Ahora necesitamos el reducer, la función pura. Normalmente encontraremos un switch. En nuestro ejemplo, tendremos en cuenta las dos operaciones del contador:

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

Nos suscribimos al store:

let store = createStore(counter);

Y ya podemos modificar el estado despachando las acciones.

store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'DECREMENT' });

Listo, espero que con el ejemplo haya quedado más claro. Lógicamente, no compensa montar esta estructura para un simple contador, pero las ventajas de usar el estado en las aplicaciones empiezan a aparecer en aplicaciones de cierto tamaño y complejidad. Además, queda muy claro qué se hace cuando se despacha una acción (‘INCREMENT’, ‘DECREMENT’), aunque luego la lógica sea compleja (imaginaos la cantidad de operaciones que se pueden realizar en el reducer, consulta de APIs…)

Si ya habéis trasteado con React y hecho alguna pequeña aplicación, os aconsejo como práctica que la adaptéis a usar estado (investigad, que no solo existe Redux)

¡Hasta la semana que viene!