Uso del 'useReducer' en React

En el mundo de React, existen múltiples hooks para ayudarnos a manejar diferentes aspectos de nuestras aplicaciones. Uno de ellos es 'useReducer', que es una alternativa al useState. Este hook es particularmente útil cuando el estado lógico de un componente se vuelve muy complejo.

El propósito principal de 'useReducer' es permitir la gestión del estado usando una función reductora. En términos más técnicos, 'useReducer' es un hook que acepta una función reductora y algún estado inicial, y devuelve un nuevo estado junto con un método de despacho.

Una función reductora es una función que acepta dos argumentos: el estado actual y una acción, y devuelve un nuevo estado. Así, cualquier acción que deba cambiar el estado del componente se realiza enviando ('despachando') una acción a la función reductora, que calcula el nuevo estado en base al antiguo estado y la acción recibida.

A continuación, un ejemplo simple para ilustrar cómo se usa 'useReducer':

import React, { useReducer } from 'react';

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

En este ejemplo, creamos un contador. Inicialmente, el estado es { count: 0 } y tenemos dos acciones posibles: 'increment' y 'decrement'. Cuando el botón de incrementar o decrementar es presionado, despachamos la acción correspondiente, y la función reductora calcula el nuevo estado en base al estado actual y la acción despachada.

Como buena práctica, es importante siempre devolver un nuevo estado en lugar de mutar el estado actual. Esto se debe a que React verifica los cambios de estado mediante comparaciones de igualdad === para decidir si se necesita un renderizado. Además, mantener las funciones reductoras puras (sin efectos secundarios) facilita la prueba y permite una fácil implementación de funcionalidades como historial de estados y deshacer/rehacer acciones.