Los hooks son funciones que se "atan" o "acoplan" al ámbito de los componentes
de tipo función (componentes funcionales).
Estas funciones se introdujeron en la versión 16.8 de React y
añaden caracteristicas importantes.
El hook useState, por supuesto, es la forma más común de crear y
administrar el estado en componentes (funcionales) de React.
Sin embargo el hook useReducer se utiliza para manipulaciones de estado
mas complejas y transiciones de estado. Al igual que los otros hooks
de React, podemos importar useReducer nativa mente desde React. La
lógica de la gestión de estado es algo que debería gestionarse en un
lugar aparte. De lo contrario, obtendrá una combinación de gestión de
estado y lógica de representación en un solo lugar, ¡y esto podría ser
difícil de leer, mantener o probar! Para ayudarnos a separar las
preocupaciones (renderizado y administración de estado), React
proporciona el hook useReducer(), que permite extraer la gestión del
estado del componente. El hook useReducer() acepta 2 argumentos: una
función reductora y un estado inicial ademas de un tercer argumento
opcional. Luego devuelve una matriz de 2 elementos: el estado actual y
una función de envío. Veamos a continuación un ejemplo completo del
uso de useReducer() en un componente de React solo con propósito
explicativo.
import { useReducer } from 'react';
// initial state
const initialState = { count: 0 };
const reducer = (state, action) => {
if (action.type === 'increment') {
return { count: state.count + action.payload };
}
};
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment', payload: 1 })}>
+
</button>
</div>
);
}
export default App;
Es importante recordar que los hooks de react incluido useReducer()
solo pueden ser utilizados en el nivel superior y solo dentro de
componentes funcionales de React. alto nivel, exploremos los detalles
más a fondo. ¿Cómo funciona el reductor? Primero abordaremos el
reductor, ya que es donde ocurre la lógica principal. El reductor es
una función que toma dos argumentos. El primero es el estado actual y
el segundo es el action(un objeto). Tenga en cuenta que nunca tendrá
que proporcionar usted mismo los argumentos al reductor. El hook
useReducer() maneja esto automáticamente. Tiene (state) el formato que
desee (normalmente un objeto, pero en realidad puede ser cualquier
cosa). También puede (action) ser lo que quieras, pero hay una
convención muy utilizada sobre cómo estructurarlo. De manera
convencional, (action) es un objeto con una propiedad requerida y una
propiedad opcional: (type) es la propiedad requerida. Le dice al
reductor qué parte de la lógica debería usar para modificar el estado.
payload es la propiedad opcional. Proporciona información adicional al
reductor sobre cómo modificar el estado. En el ejemplo anterior de
contador, (state) era un objeto con una sola propiedad
(count).(action) es un objeto cuyo (type) puede ser 'increment'y cuya
carga útil o payload es la cantidad en la que desea incrementar el
contador. Los reductores suelen estructurarse con una switch
declaración sobre la acción type, por ejemplo:
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + action.payload };
case 'decrement':
return { count: state.count - action.payload };
case 'reset':
return { count: 0 };
}
};
Tambien podrian ser extructurados utilizando objetos,
por ejemplo:
const actions = {
increment: (state, action) =>{
return { count: state.count + action.payload };
},
decrement: (state, action) =>{
return { count: state.count - action.payload };
},
reset: () => {
return { count: 0 };
}
}
const reducer = (state, action) => {
const { type } = action;
const currentAction = actions[type];
return currentAction ? currentAction(state, action) : initialState;
};
Esta extructura sería útil en el caso de tener que nombrar y organizar
mejor varias funciones reductoras.
Gracias por la lectura, espero sea útil las cosas que encuentro
interesantes.
En un próximo articulo escribiré acerca de Zustand una librería muy
popular para gestión de estados y su uso con funciones reductoras
Top comments (0)