Cómo utilizar el gancho useReducer de React

¡Descubre para qué sirve el gancho useReducer de React y cómo trabajar con él!

Desde que React introdujo los hooks , he trabajado con ellos en varios proyectos y son simplemente geniales.

Al eliminar todos los componentes basados ​​en clases, el código parece mucho más JavaScript “real”. Además, los componentes de función finalmente pueden administrar el estado.

Primero, consulta mi introducción a los ganchos de React , si eres nuevo en ellos.

Un gancho que a veces uso es useReducer.

import React, { useReducer } from 'react'

Este gancho se utiliza para gestionar el estado. Es similar a useState, pero más complejo.

Esta es la diferencia clave entre useStatey useReducer: con useReducer, el estado se modifica pasando mensajes en lugar de llamar a la función de actualización.

Si sabes cómo funciona Redux , es básicamente lo mismo. Un reductor es una función pura que calcula el siguiente estado en función del estado anterior y la acción que se ha enviado.

(currentState, action) = newState

¿Qué significa “función pura”? Una función pura toma una entrada y devuelve una salida sin cambiar la entrada ni nada más. Esto significa que un reductor devuelve un estado completamente nuevo que sustituye al anterior.

Un reductor debe:

• Nunca mutes tus argumentos
• Nunca genera efectos secundarios (no hay llamadas API que cambien nada)
• Nunca llame a funciones no puras, funciones que cambian su salida en función de factores distintos de su entrada (por ejemplo, Date.now()o Math.random())

No hay ningún refuerzo, pero hay que respetar las reglas. Y esto tiene una ventaja: los reductores son mucho más fáciles de probar, porque no tienen efectos secundarios.

Esto permite centralizar la gestión del estado, permitiendo a los componentes modificarlo mediante el envío de mensajes, y también permite utilizar (y alterar) un estado más complejo en sus componentes.Te recomendamos Calefactor electrico

Hagamos un ejemplo, con un componente contador.

useReduceracepta como argumentos una función reductora y un valor de estado inicial. En este caso nuestro estado es un entero, que empieza desde 0:

const Counter = () = { const [state, dispatch] = useReducer(reducer, 0)}

El reductor es una función que toma, como se explicó anteriormente, el estado actual y una acción, que puede ser un valor de cualquier tipo que deseemos. En este caso es una cadena:

const reducer = (state, action) = { switch (action) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: throw new Error() }}

También hacemos que el componente genere algo de JSX para que esta sencilla aplicación funcione:

const Counter = () = { const [count, dispatch] = useReducer(reducer, 0) return ( Counter: {count} button onClick={() = dispatch('INCREMENT')}+/button button onClick={() = dispatch('DECREMENT')}-/button / )}

Aquí está el ejemplo completo en Codepen: https://codepen.io/flaviocopes/pen/MMQgrB/

Ahora, imagina que este estado puede ser un objeto con muchas propiedades y que las distintas acciones solo cambian una propiedad a la vez. Ese es un excelente caso de uso para este gancho.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar el gancho useReducer de React

Desde que React introdujo los hooks , he trabajado con ellos en varios proyectos y son simplemente geniales. ¡Descubre para qué sirve el gancho useReducer de

programar

es

2025-01-20