Simplificando las ataduras Redux con ganchos de reacción

Los ganchos son funciones de Javascript. Proporcionan un mecanismo para que un componente de la función acceda a los métodos de estado y ciclo de vida sin depender de un componente de envoltura o de un componente de orden superior. En el panorama general, esto ayuda enormemente a mantener los componentes pequeños y limpios, y a mantener la lógica de estado relacionada en orden. La documentación oficial proporciona una excelente visión general de Hooks, pero exploraremos algunos aspectos clave de la misma.

Los ganchos están pensados para ser usados con componentes funcionales. React tiene un conjunto de ganchos incorporados que son útiles para manejar la lógica del estado del componente. Estos son:

1. useState()
2. useEffect()

useState() nos permite acceder y mantener el estado local de un componente. Con un componente de clase, usamos la propiedad state y la función setState() para este propósito. En comparación, Hooks proporciona una API más simple para proporcionar la misma funcionalidad. El código que se muestra a continuación muestra un contador simple implementado utilizando un componente de clase y su transformación a un componente funcional utilizando Hooks.

123456789101112131415161718192021222324252627282930313233importarReaccionar,{Componente}de$0027reaccionar$0027;exportarclase predeterminadaContadorComponenteAmpliarComponente{constructor(es) {super(es))};this.state={ counter:0, algunosDemoObjecto:{algunasPropiedades:""}}}manejarButtonClick=(e)={esto. setState({ counter:this.state.counter+1});}render(){return(<div>div>{this.state.counter}</div>div>};button onClick={this.handleButtonClick};UPYOUGO</button

javascript

123456789101112131415161718192021importReact,{ useState }from$0027react$0027;exportdefaultfunctionCounterComponent(){const[counter, setCounter]=useState(0);const[someObject, setObject]=useState({ someProperty: ""});return(<div>div>{contador}</div;};botón onClick={()=;setCounter(counter+1)};UPYOUGO</botón

javascript

Como pueden ver, el código con las funciones es simple y limpio. Además, una cosa importante a tener en cuenta es que se utiliza el argumento de la función useState para pasar el estado inicial de la variable. Por ejemplo, el estado inicial de counter es 0 y se pasa como argumento a la función. Puedes usar useState tantas veces como necesites para inicializar el estado.

Esto está muy bien, pero ¿qué pasa con los métodos de ciclo de vida? Como desarrolladores de React, prosperamos con el uso de los métodos componentDidMount(), componentDidUpdate() y componentWillUnmount() para gestionar las llamadas iniciales a la API requeridas por un componente. Por ejemplo, si necesitamos recuperar el estado inicial del contador de una API en el montaje del componente, esto es un problema. useEffect() resuelve este problema. El código que se muestra a continuación amplía nuestro anterior CounterComponent para describir el uso de los métodos de ciclo de vida y useEffect() en los componentes funcionales.
123456789101112131415161718192021222324252627282930313233343536373839404142434445importarReaccionar,{Componente}de$0027reaccionar$0027;exportarclasesdefaultContadorComponenteextiendeComponente{constructor(es) {super(es);esto. state={ counter:0, someDemoObject:{ someProperty:""}}}componentDidMount(){this.setState({ counter: thiss. apiCall()})}apiCall(){// asume que esta función es una llamada a la API que// recupera el valor inicial del contador de un servidor distante return10;}handleButtonClick=(e)= &gt {this.setState({ counter:this. state.counter+1});}render(){retorno(};div,};{este.state.counter}</div,};div,}}}botón onClick={este.handleButtonClick};UPYOUGO</botón

javascript

12345678910111213141516171819202122232425262728293031importReact,{ useState, useEffect }from$0027react$0027;functionapiCall(){// asumir que esta función es una llamada a la API que// recupera el valor inicial del contador de un serverreturn distante10; }exportdefaultfunctionCounterComponent(){const[counter, setCounter]=useState(0);const[someObject, setObject]=useState({ someProperty: ""});useEffect(()=[setCounter(apiCall());},[])return(<div><div>{counter}</div>div> ;botón onClick={()==;setCounter(counter+1)};UPYOUGO</button

javascript

Así que ahora tenemos un conocimiento básico de Hooks. Sumerjámonos en los documentos de Redux para averiguar sobre las nuevas API que han introducido con Hooks.