useReducer Hook ### ### Introducción ### El Hook useReducer es una alternativa a useState para manejar el estado en componentes funcionales. Es útil para manejar estados complejos y la lógica de actualización que involucra múltiples sub-valores o cuando el próximo estado depende del anterior. useReducer se basa en el concepto de reducer, similar al patrón usado en Redux. ### Sintaxis básica ### useReducer se invoca con dos argumentos: un reducer y un estado inicial. Retorna un array que contiene el estado actual y el dispatch para enviar acciones. javascript 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 ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'increment' })}> Increment </button> <button onClick={() => dispatch({ type: 'decrement' })}> Decrement </button> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - initialState es el estado inicial del contador. - reducer es una función que determina cómo cambia el estado en respuesta a una acción enviada. - Counter usa useReducer para manejar el estado del contador. Al hacer clic en los botones, se envían acciones que el reducer maneja para actualizar el estado. ### Cuando usar useReducer ### useReducer es especialmente útil cuando: - Tienes lógica de estado compleja que involucra múltiples subvalores. - El estado próximo depende del estado actual. - Quieres optimizar el rendimiento de componentes que podrían volver a renderizar debido a cambios de estado. ### Ejemplo avanzado ### Considera un ejemplo más avanzado con un formulario de login. javascript import React, { useReducer } from 'react'; const initialState = { username: '', password: '', error: '' }; function formReducer(state, action) { switch (action.type) { case 'setFieldValue': return { ...state, [action.field]: action.value }; case 'setError': return { ...state, error: action.error }; case 'reset': return initialState; default: throw new Error(); } } function LoginForm() { const [state, dispatch] = useReducer(formReducer, initialState); const handleChange = (e) => { dispatch({ type: 'setFieldValue', field: e.target.name, value: e.target.value }); }; const handleSubmit = () => { if (state.username === '' || state.password === '') { dispatch({ type: 'setError', error: 'Todos los campos son obligatorios' }); } else { // Procesar login } }; return ( <div> <input name='username' value={state.username} onChange={handleChange} placeholder='Username' /> <input name='password' type='password' value={state.password} onChange={handleChange} placeholder='Password' /> <button onClick={handleSubmit}>Login</button> {state.error && <p style={{ color: 'red' }}>{state.error}</p>} </div> ); } ### Descripción del ejemplo avanzado ### En el ejemplo avanzado: - initialState contiene los valores iniciales del formulario. - formReducer maneja las acciones para actualizar campos específicos, establecer errores y resetear el formulario. ### Ventajas de useReducer ### - Manejo lógico de estados y acciones: Permite tener una capa clara y centralizada en la lógica de actualización del estado. - Legibilidad: Es más fácil de leer y mantener en estados complejos. ### Limitaciones ### Aunque useReducer es poderoso, podría ser innecesariamente complejo para estados simples. Considera usar useState para casos sencillos. [Placeholder para imagen sobre el flujo del useReducer: Diagrama que muestra cómo se maneja el estado usando el Hook useReducer, incluyendo el estado inicial, el reducer, la acción enviada, y cómo afecta al estado.]