Comencemos con la conexión del componente a la tienda usando el método de conexión.
123456789101112// ...importar{conectar }de "react-redux";constQuoteChanger=props={{i};{regresar<div};{props.quote}</div{i};;};constmapStateToProps=state={i};({ cita: state.quote});exportarefaultconnect(mapStateToProps)(QuoteChanger);jsx
Ahora despacharemos la acción CHANGE_QUOTE de este componente cada 5 segundos (5.000 milisegundos). Para activar este temporizador, necesitamos usar setTimeout en nuestro componente. setTimeout es una función de la API del navegador y se ejecuta de forma asíncrona, por lo que se considera un efecto secundario.
En React, los efectos secundarios se manejan en el gancho de ciclo de vida del componenteDidMount. Así que, probablemente necesitamos cambiar nuestro componente funcional en un componente de clase. Podríamos hacerlo, pero en su lugar, les mostraré una forma moderna de manejar los efectos secundarios en React usando el gancho useEffect().
useEffect() Hook
El gancho useEffect() nos permite realizar efectos secundarios en un componente de la función. Es equivalente a los métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount envueltos en una única API.
El gancho useEffect() acepta una función de devolución de llamada como parámetro que debe devolver una función.
Así que para poner lo anterior en el contexto de nuestro ejemplo, nuestro gancho useEffect() se verá de la siguiente manera:
1234567useEffect(()=useEffect(()=const timer =setTimeout(()=; props.dispatch({ type: "CHANGE_QUOTE"}),5000);return()=useEffect(timer);};jsx
La función setTimeout() devuelve un objeto temporizador que debe ser borrado mediante la función clearTimeout() para evitar cualquier resultado adverso en la aplicación.
12345678910111213141516171819importReact,{ useEffect }de "react";import{ connect }de "react-redux";constQuoteChanger=props={{i};{useEffect(()={i};{const timer =setTimeout(()={i}; props. dispatch({ type: "CHANGE_QUOTE"}),5000);return()=Timeout(timer);});return<div>{props.quote}</div>;};constmapStateToProps=state=={{[quote: state.quote}]);exportdefaultconnect(mapStateToProps)(QuoteChanger);jsx