Consejos Tecnológicos

Use el gancho UseReducer () de React para administrar la energía del estado

El seguimiento de cómo cambian los datos de su aplicación a lo largo del tiempo se denomina administración de estado en React. Podrás crear aplicaciones dinámicas que se adapten a la entrada del usuario controlando el estado de la aplicación. En React, existen muchas técnicas para manejar el estado, incluida la administración de estado basada en clases y marcos de terceros como Redux. En este artículo, aprenderá a usar Hooks para manejar el estado de los componentes funcionales.

Los ganchos son un conjunto de herramientas que ejecutan funciones personalizadas cuando cambian los accesorios de los componentes. Los desarrolladores pueden usar Hooks para generar código más corto y legible, que es fácil de compartir y mantener porque este método de administración de estado no implica el uso de clases. Una de las principales diferencias entre Hooks y la gestión de estado basada en clases es que ningún objeto tiene todo el estado. En su lugar, puede dividir el estado en partes que se pueden actualizar de forma independiente.

Si ha estado usando React durante un tiempo, es posible que esté familiarizado con patrones como los accesorios de renderizado y los componentes de orden superior que intentan resolver este problema. Sin embargo, el uso de estos patrones requiere que reconstruya los componentes, lo que puede llevar mucho tiempo y hacer que el código sea más difícil de seguir.

En React DevTools, definitivamente encontrará el «infierno de envoltura» de componentes rodeados de proveedores, consumidores, componentes de orden superior, accesorios de renderizado y otras capas de abstracción. Aunque podemos filtrarlos en DevTools, esto implica un problema mayor: React necesita una primitiva mejor para compartir la funcionalidad con estado.

Los ganchos le permiten extraer lógica con estado de un componente para que pueda probarse y reutilizarse de forma independiente. Le permiten reutilizar códigos con estado sin cambiar la jerarquía de componentes. Esto facilita la distribución de ganchos entre múltiples componentes o comunidades.

Use Hooks para administrar el estado

El enganche es una función que permite que los componentes funcionales se «enganchen» a las funciones de estado y ciclo de vida de React. Los Hooks no funcionan en clases; en cambio, te permiten usar React sin ellos. (Aunque no recomendamos reescribir los componentes existentes de la noche a la mañana, puede comenzar a usar Hooks en nuevos componentes si lo desea.

La gestión del estado en React, especialmente en aplicaciones grandes, se usa para forzar el uso de frameworks de terceros como Redux y MobX. Estas herramientas de terceros facilitan la actualización del estado de la aplicación de una manera más predecible y detallada, pero suelen incurrir en gastos generales adicionales y una curva de aprendizaje alta.

React incluye algunos ganchos integrados, como useState. Incluso puede escribir sus propios Hooks para reutilizar comportamientos con estado en todos los componentes. Comenzaremos con los Hooks integrados.

estado de uso

useState es un Hook, que se llama en el componente de función para agregarle algún estado local. Este estado se conservará entre las repeticiones de React. useState devuelve un par que consta del valor del estado actual y la función que se puede usar para actualizarlo. Esta función se puede llamar desde un controlador de eventos o desde cualquier otro lugar. Se puede comparar con este. setState está en una clase, sin embargo, no mezcla el estado anterior y el nuevo.

const [state, setState] = useState(initialState);

Ejemplo 1:

Declaring a state variable: 

class Demo extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
count: 0 
    }; 
}

No tenemos esto en el componente de función, por lo que no podemos asignar ni leer Este estado. En su lugar, llamamos useState Hook desde dentro del componente:

import React, { useState } from 'react';
 function Demo() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

La función useState declara una «variable de estado». La variable del ejemplo anterior es recuento. Esta es una técnica de «reservar» ciertos valores a través de llamadas de función-useState es un nuevo método que usa la misma funcionalidad en las clases proporcionadas por this.state. Cuando se cierra la función, las variables normalmente «desaparecen», pero React conserva las variables de estado.

useState devuelve un par de valores: estado actual y función de actualización.Por eso escribimos constante [count, setCount] = Usar estado ()En una clase, esto es equivalente. state.count y this.setState como un par.

Declaramos contar como una variable de estado y lo ponemos en 0. Entre re-renderizaciones, React recordará su valor actual y devolverá el último valor a nuestra función. setCount se puede utilizar para actualizar el recuento actual.

Ejemplo 2:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(21);
  const [pet, setPet] = useState('dog');
  const [todos, setTodos] = useState([{ text: 'Complete assignment' }]);
  // ...
}

La técnica de desestructuración de matrices nos permite asignar otros nombres a las variables de estado declaradas llamando a useState. La API useState no admite estos nombres. Por el contrario, React cree que si llama a useState varias veces, lo ejecutará en el mismo orden cada vez que renderice.

Utilice el gancho useReducer ()

useReducer es uno de los nuevos ganchos incluidos en React 16.8. Es una alternativa a useState Hook y ayuda a administrar la lógica de estado compleja en las aplicaciones React. Cuando se usa con otros ganchos como useContext, useReducer puede ser una gran alternativa a Redux o MobX; de hecho, en algunos casos, puede ser una mejor solución.

Antes de continuar, quiero decir que este tutorial no condena a Redux y MobX, por lo general son la mejor opción para administrar el estado global en grandes aplicaciones React. Sin embargo, cuando los Hooks también pueden manejar su estado, los desarrolladores de React a menudo confían en marcos de gestión de estado de terceros.

Junto con la dificultad de comenzar a usar bibliotecas de terceros como Redux y la necesidad de una gran cantidad de código repetitivo, usar React Hooks y Context API para administrar el estado es una opción muy atractiva, porque no hay necesidad de instalar paquetes externos o agregar mucho en nuestros Archivos y carpetas que gestionan el estado global de la aplicación.

¿Puedes reemplazar Redux?

Redux es un contenedor de estado predecible que le permite crear aplicaciones JavaScript que se ejecutan de manera confiable en entornos de cliente, servidor y nativos y son fáciles de probar.

El estado de la aplicación se almacena en el almacenamiento de Redux y cualquier componente puede acceder a cualquier estado que necesite desde el almacenamiento.

Una de las críticas más comunes a Redux es que requiere mucho código repetitivo para configurar algunas funciones bastante simples. Incluir redux y react-redux expande el tamaño del paquete del proyecto, y esta disposición aumenta la complejidad del código.

Esto no se debe a la culpa de los desarrolladores de redux. Redux apunta a ser una herramienta de administración de estado de propósito general que no se limita a React. Por lo tanto, adaptarlo a cualquier marco en particular siempre requerirá un poco más que cualquier configuración dedicada a ese marco.

useReducer resuelve este problema Debido a que es un gancho de reacción, proporciona las funciones básicas de administración de estado proporcionadas por redux sin todo el código repetitivo en la configuración.

Para proyectos que requieren un sistema de gestión estatal más avanzado pero que no necesitan las campanas y silbidos adicionales que vienen con redux, esta es una alternativa (casi) adecuada.

Debido a que useReducer está diseñado específicamente para React, es relativamente simple de integrar en los componentes de React.

Usemos useReducer ()

useReducer, como useState Hook, se usa para guardar y actualizar el estado. Su primer parámetro es una función reductora y el segundo parámetro es el estado inicial.

useReducer proporciona una matriz que contiene los valores del estado actual y una función de envío a la que puede pasar una acción y luego llamarla. Es similar al modo Redux, pero con algunas modificaciones.

const [state, dispatch] = useReducer(reducer, initialArg, init);

Cuando tiene una lógica de estado compleja que contiene varios subvalores o el siguiente estado depende del estado anterior, generalmente es preferible usar Reducer a usar State. Debido a que puede transmitir el envío en lugar de las devoluciones de llamada, useReducer le permite mejorar el rendimiento de la generación de componentes profundamente modificados.

Ejemplo: agregar un número

import React, { useReducer } from 'react'; 
function Counter() { 
  const [sum, dispatch] = useReducer((state, action) => { 
    return state + action; 
  }, 0);
  return ( 
    <> 
      {sum} 
      <button onClick={() => dispatch(1)}> 
        Add 1 
      </button> 
    </> 
  ); 
}

Use el gancho UseReducer () de React para administrar la energía del estadoPuede ver cómo al hacer clic en el botón se realiza una operación con un valor de 1, luego se agrega al estado actual y se vuelve a renderizar el componente con el nuevo estado (¡más grande!).

Especificar estado inicial

Hay dos formas de inicializar el estado useReducer. Dependiendo de la aplicación, puede elegir uno de ellos. La forma más sencilla es pasar el estado inicial como segundo parámetro:

const [state, dispatch] = useReducer( 
    reducer, 
    {count: initialCount}   
);

React no usa Redux popular Estado = estado inicial Acuerdo de argumentación. Debido a que el valor inicial a veces depende de los accesorios, se proporciona mediante llamadas de gancho. Si realmente desea imitar el comportamiento de Redux, puede llamar a useReducer (reducer, undefined, reducer) pero no se recomienda.

Generalizar

Mirando hacia atrás en lo que hemos aprendido, Hooks es un cambio importante en React que introduce un nuevo mecanismo para compartir código y actualizar componentes sin usar clases.

Ahora puede desarrollar proyectos complejos que respondan a usuarios y datos dinámicos, porque puede usar useState y useReducer para crear componentes. También tiene una base de conocimientos sólida desde la que puede estudiar Hooks más avanzados o diseñar Hooks personalizados.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba