Manejar el estado de una aplicación React de forma clara y predecible es uno de los retos más importantes en el desarrollo frontend. El hook useReducer ofrece una manera declarativa de organizar todos los posibles estados y las transiciones entre ellos, evitando la dispersión que puede surgir al usar múltiples estados individuales. Comprender los reducers, los estados compuestos y las acciones es el paso previo indispensable para sacarle el máximo provecho.
¿Qué es un reducer y por qué hace tu estado más declarativo?
Un reducer es una función que recibe el estado actual y una acción, y devuelve un nuevo estado. Su mayor ventaja es que declara todos los posibles estados por los que puede pasar la aplicación en un solo lugar [0:18]. En vez de repartir la lógica de actualización en distintos handlers, el reducer centraliza cada transición, lo que facilita la lectura, el mantenimiento y la depuración del código.
Para funcionar, un reducer necesita dos piezas fundamentales:
- Estados compuestos (compound states).
- Acciones (actions).
¿Qué diferencia hay entre estados simples y estados compuestos?
Los estados simples son aquellos que se crean de forma individual: un value con su setValue, un error con su setError, y así sucesivamente [0:45]. Cuando la aplicación crece, manejar muchos estados separados se vuelve difícil de rastrear.
Los estados compuestos, en cambio, agrupan todas esas piezas dentro de un único objeto con una sola función actualizadora [0:55]. Esto significa que el estado completo de un componente vive en una estructura organizada, y cualquier cambio pasa por un mismo canal de actualización.
¿Cómo funcionan las acciones dentro de un reducer?
Las acciones son los objetos que se envían al reducer para indicarle qué transición de estado debe ejecutar [1:10]. Cada acción tiene dos propiedades:
- Action type: nombre clave que identifica cuál de todos los estados posibles debe aplicarse. Es obligatorio y actúa como un selector dentro del reducer [1:20].
- Action payload: dato adicional y opcional que aporta dinamismo al nuevo estado [1:35].
¿Cuándo se necesita un action payload?
No siempre los estados son valores fijos como true o false. Cuando el nuevo estado depende de información externa —la respuesta de una API, el texto que un usuario escribe en un input o cualquier dato que no se conoce de antemano— estamos ante estados dinámicos [1:45]. El payload transporta esa información variable hacia el reducer para que el estado resultante refleje el contexto real de la aplicación.
Por ejemplo, si un usuario busca un producto:
- El action type podría ser
"BUSQUEDA_EXITOSA".
- El action payload contendría la lista de resultados devuelta por el servidor.
De esta forma, el reducer sabe qué estructura de estado aplicar gracias al type, y qué datos concretos insertar gracias al payload.
¿Cuál es el flujo completo de un reducer en React?
El ciclo se puede resumir en cuatro pasos [2:05]:
- Se definen distintas acciones con sus tipos y, cuando corresponde, sus payloads.
- Esas acciones se despachan (dispatch) hacia el reducer.
- El reducer evalúa el action type y selecciona el estado correspondiente entre todos los que tiene declarados.
- Si existe un payload, el reducer lo incorpora para personalizar el estado final: un color, un mensaje, un conjunto de datos dinámicos [2:30].
Este patrón mantiene la lógica de estado predecible y centralizada, porque cada posible cambio ya está descrito dentro del reducer. No hay sorpresas ni estados intermedios sin definir.
Entender estas bases —estados compuestos, action type y action payload— prepara el terreno para implementar reducers de distintas maneras y aprovechar al máximo useReducer en componentes reales. ¿Ya has tenido problemas manejando muchos estados individuales en un mismo componente? Comparte tu experiencia y cómo piensas resolverlo con este enfoque.
