Quiero llamar productos desde mi servidor con axios en mi proyecto de reacción. Estoy usando redux. Cuando activé las acciones en el componente con useeffect, mis productos no llegaron, pero mis productos llegaron sin usar useeffect.
en mi componente:
async function get(){ await props.getProducts() console.log(props.products) } useEffect(() => { get() }, []); when I write 'get or get()' in square brackets , products loop coming to console continuous }mis acciones:
import axios from "axios" const url="https://my-expressjs-ap.herokuapp.com/products" export const getProducts=()=> (dispatch: (arg0: { type: any; payload: any }) => any)=>{ axios .get( `https://my-expressjs-ap.herokuapp.com/products` ) .then((response) => dispatch({ type: "GET_PRODUCTS_SUCCESS", payload: response.data }) ) .catch((error) => dispatch({ type: "GET_PRODUCTS_ERROR", payload: error })); // fetch(url).then(res=> res.json()) // .then(response=>dispatch(({type:"GET_PRODUCTS_SUCCESS",payload:response})) // ).catch(error=>dispatch({type:"GET_PRODUCTS_ERROR", payload:error})) }mis reductores:
const INITIAL_STATE={ products:[], message:'' } export const reducer=(state=INITIAL_STATE,action: any)=>{ switch(action.type){ case'GET_PRODUCTS_SUCCESS': return {...state, products:action.payload}; case 'GET_PRODUCTS_ERROR': return{...state, message:action.payload} default: return state; } }Entonces, la razón por la que su console.log(props.products) no muestra ningún producto cuando llama a get() en este useEffect:
useEffect(() => { get() }, []); se debe a que el enlace useEffect se ejecuta solo una vez, es decir, cuando se monta el componente, por lo que después de que se complete su llamada api await props.getProducts() a través de redux, no podrá ver el nuevo valor porque el useEffect no se ejecutará de nuevo .
Con respecto a este comentario, usted en su código: cuando escribo 'get or get ()' entre corchetes, los productos llegan a la consola continuamente . haciendo que su gancho useEffect se ejecute nuevamente, lo que implica una nueva llamada api, que devuelve nuevos resultados, el resultado que creo que son accesorios para el componente, provoca otro procesamiento, luego se crea una nueva instancia de get ... useEffect se ejecuta nuevamente ... Entonces te queda un bucle infinito.
Sin embargo, lo que puede hacer es crear una versión memorizada de get y usarla como dependencia en el gancho useEffect, es decir
const getProductsAsync = useCallback(async() => { await props.getProducts() console.log(props.products) }, [props.getProducts]); useEffect(() => { getProductsAsync() }, [getProductsAsync]); // Now that we have this in the dep array, this hook only gets called if there a change in reference for getProductsAsync. }Yo personalmente no haría lo anterior. Yo solo haría lo siguiente:
useEffect(() => { const getProductsAsync = async() => { await props.getProducts() console.log(props.products) }; getProductsAsync(); }, [props.getProducts]); Tampoco está claro por qué necesita el enlace useEffect para registrar los productos después de una llamada API exitosa. Si tiene que realizar alguna acción en el resultado de la llamada API, le sugiero que agregue otro useEffect con los products como dependencia en la matriz de dependencia del gancho.