useReducer: el reducer del SC-03, en React

Teoría22 min20 XP

Cuando el estado tiene muchas acciones que lo cambian de formas distintas —agregar, borrar, editar, limpiar—, varios useState sueltos se vuelven un desorden. useReducer los organiza en un solo lugar: una función pura que recibe el estado y una acción, y devuelve el nuevo estado. Y te va a sonar íntimo, porque es EXACTAMENTE el reducer con acciones discriminadas que construiste a mano en el supercurso de TypeScript.

El cajero central en vez de mil botones

El reducer que ya conoces

En el supercurso de TypeScript construiste un reducer(estado, accion) con acciones como discriminated union y un switch exhaustivo. useReducer es ese mismo patrón, conectado a React:

Reconoces las piezas del SC-03: el type Accion como discriminated union, el reducer puro con su switch que estrecha cada caso, la inmutabilidad ([...estado, ...], filter). Lo NUEVO es useReducer(reducer, []), que devuelve [estado, dispatch]. dispatch(accion) es cómo envías una acción al reducer —el equivalente de setEstado, pero describiendo QUÉ pasó ({ tipo: "borrar", id }) en vez de calcular el nuevo estado en el componente. React corre tu reducer y re-renderiza con el resultado.

Por qué useReducer ordena el estado complejo

Las ventajas del reducer

Toda la lógica en un lugar: cada forma de cambiar el estado es un case del reducer, no un manejador disperso por el componente. Para entender cómo evoluciona el estado, lees el reducer y ya.
El componente se simplifica: en vez de calcular el nuevo estado en cada botón, solo dispatchea una acción que DESCRIBE la intención ({ tipo: "borrar", id }). El qué-hacer vive en el reducer.
Testeable y predecible: el reducer es una función PURA (SC-02) —entra estado + acción, sale estado nuevo—, así que lo testeas sin React, exactamente como en el SC-03.
Acciones tipadas: la discriminated union hace imposibles las acciones mal formadas, y el switch te da narrowing y exhaustividad (con assertNever si quieres, SC-03).

Es el mismo motor de estado de Redux, integrado en React sin librerías.

useState o useReducer

¿Qué es 'dispatch' en useReducer y en qué se diferencia de un setState normal?

Mini-reto

Convierte un estado a reducer: 1) toma un contador con acciones "incrementar", "decrementar" y "reiniciar"; 2) escribe el type Accion (discriminated union) y el reducer puro con su switch; 3) conéctalo con useReducer y tres botones que despachen cada acción. Bonus: agrega assertNever en el default (SC-03) y comprueba que TS te obliga a manejar toda acción nueva. Sientes cómo el reducer del SC-03 encaja en React sin esfuerzo.

Qué sigue

Módulo 2 cerrado: dominas el estado —useState, la inmutabilidad, lifting, useReducer—, el corazón reactivo de React. El reto del módulo junta todo en una "Mi Bolsillo" interactiva de verdad: agregar, borrar y filtrar gastos con estado. Después, el módulo 3 trae los EFECTOS: cómo React se conecta con el mundo exterior (APIs, temporizadores, suscripciones).