UseReducer

Vista previa del material en texto

UseReducer 
 
`useReducer` es otro hook en React que se utiliza para manejar el estado de un componente de 
manera más compleja, especialmente cuando el estado tiene una lógica más avanzada que 
simplemente almacenar un valor. `useReducer` es una alternativa a `useState` y se basa en el patrón 
de diseño de Redux, lo que significa que es útil cuando el estado necesita seguir una lógica más 
sofisticada, como actualizaciones condicionales o derivaciones de estado. 
 
La función `useReducer` toma dos argumentos: el primero es un reducer (reductor) y el segundo es 
el estado inicial. Un reducer es una función que especifica cómo cambia el estado en respuesta a una 
acción. Cuando una acción es despachada al reducer, éste toma el estado actual y la acción como 
entrada y devuelve un nuevo estado. 
 
Sintaxis del hook `useReducer`: 
 
----------------------------------------------------------------------------- 
const [state, dispatch] = useReducer(reducer, initialState); 
------------------------------------------------------------------------------ 
 
- `state`: Representa el estado actual. 
- `dispatch`: Es una función que se utiliza para despachar acciones al reducer y actualizar el estado. 
 
Un reducer tiene la siguiente forma: 
 
------------------------------------------------------------------------------------------------------------- 
const reducer = (state, action) => { 
 // Lógica para determinar cómo se actualiza el estado según la acción 
 return newState; 
}; 
---------------------------------------------------------------------------------------------------------------- 
 
 
 
 
Ejemplo de cómo usar `useReducer` en un componente funcional: 
 
 
--------------------------------------------------------------------------------------------------- 
import React, { useReducer } from 'react'; 
 
const initialState = { 
 count: 0 
}; 
 
const reducer = (state, action) => { 
 switch (action.type) { 
 case 'INCREMENT': 
 return { ...state, count: state.count + 1 }; 
 case 'DECREMENT': 
 return { ...state, count: state.count - 1 }; 
 default: 
 return state; 
 } 
}; 
 
const Contador = () => { 
 const [state, dispatch] = useReducer(reducer, initialState); 
 
 return ( 
 <div> 
 <p>Contador: {state.count}</p> 
 <button onClick={() => dispatch({ type: 'INCREMENT' })}>Incrementar</button> 
 <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrementar</button> 
 </div> 
 ); 
}; 
 
export default Contador; 
---------------------------------------------------------------------------------------------------------------------- 
 
En este ejemplo, hemos creado un componente funcional `Contador` que utiliza `useReducer` para 
manejar el estado del contador. El reducer toma el estado actual y la acción (que es un objeto con 
una propiedad `type`) y devuelve un nuevo estado actualizado. 
 
Cuando hacemos clic en los botones "Incrementar" o "Decrementar", llamamos a la función 
`dispatch` y enviamos una acción al reducer. Según la acción despachada, el reducer actualiza el 
estado y el componente se vuelve a renderizar con el nuevo valor del contador. 
 
`useReducer` es especialmente útil cuando el estado y la lógica de actualización se vuelven más 
complejos y necesitas manejar múltiples acciones y cambios de estado en tu componente. Es una 
herramienta valiosa en situaciones donde `useState` podría no ser suficiente para mantener la 
claridad y la modularidad en tu código.