1

como he comentado en el titulo , estoy intentando traerme los datos de una api a mi componente, desde el componente puedo enviar mi petición sin problema , pasa por el reducer , comienza la action , la pasa al sagas , hace la llamada dentro del sagas y la respuesta vuelve a llegar al reducer con otra accion que es success , pero sin embargo , cuando tiene que volverse a renderizar el componente con la nueva respuesta , no se renderiza, supongo que será algo que no he hecho bien en los ciclos de vida o no se ha conectado el mapstatetoprops con el reducer bien, pongo el codigo:

mi componente Cocteleria.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchCoctelNameStart } from "../Store/actions/actions";


class Cocteleria extends Component {
  constructor(props){
    super(props);
    this.state = {
      nameCoctel: "", // Aquí almacenaremos el valor del input
    };
  }
  

  handleInputChange = (event) => {
    this.setState({ nameCoctel: event.target.value });
    console.log("obtenemos input", this.state.nameCoctel);
  };

  handleFetchCoctel = () => {
    const { nameCoctel } = this.state;
    // Llama a tu acción pasando el valor del input
    this.props.fetchCoctelNameStartAction(nameCoctel);
    console.log("enviamos nombre", nameCoctel);
  };

  componentDidUpdate(prevProps) {
    if (prevProps.nameCoctel !== this.props.nameCoctel) {
      console.log("Datos actualizados:", this.props.nameCoctel);
    }
  }

  render() {
    console.log("en el componente", this.props.nameCoctel, this.state.name);
    const { loading, nameCoctel, error } = this.props;
    return (
      <div>
        <input
          className="inputCoctel"
          type="text"
          placeholder="Introduce el nombre del cóctel"
          value={this.state.nameCoctel}
          onChange={this.handleInputChange}
        />
        <button className='boton' onClick={this.handleFetchCoctel}>Fetch Coctel Name</button>
        <div>
        <p>nameCoctel: {nameCoctel}</p>
        <p>error: {error ? error.message : 'Ningún error'}</p>
          <div key={this.props.nameCoctel?.name}>
            <h1>{this.props.nameCoctel?.name}</h1>
            <h1>Ingredients:{nameCoctel} </h1>
            <ul>
              {/* Aquí puedes mapear los ingredientes si existen */}
              {this.props.nameCoctel?.ingredients?.map((ingredient, index) => (
                <li key={index}>{ingredient}</li>
              ))}
            </ul>
          </div>


          <p>No data available.</p>

        </div>

      </div>
    );
  }
}


const mapStateToProps = state => {
  return {
    loading: state.loading,
    nameCoctel: state.nameCoctel,
    error: state.error,
  };
};

const mapDispatchToProps = (dispatch) => ({
  fetchCoctelNameStartAction: (nameCoctel) =>
    dispatch(fetchCoctelNameStart(nameCoctel)),
});

//si quisiera añadir un console.log para ver si se despacha la accion
/**/

export default connect(mapStateToProps, mapDispatchToProps)(Cocteleria);




//falta por llevarme desde mapstatetoprops el nombre que recibo de la api a mi componente





mis actions.js

export const fetchCoctelNameStart = (nameCoctel) => ({
  type: 'FETCH_COCTEL_NAME_START',
  payload: { nameCoctel, loading: true },
});

export const fetchCoctelNameSuccess = (data) => ({
  type: 'FETCH_COCTEL_NAME_SUCCESS',
  payload: { data, loading: false },
});

export const fetchCoctelNameFailed = (error) => ({
  type: 'FETCH_COCTEL_NAME_FAILED',
  payload: { error, loading: false },
});


mi reducer.js

import '../actions/actions';

const initialState = {
  loading: false,
  nameCoctel: '',
  error: null,
};

const coctelReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_COCTEL_NAME_START': {
      console.log("estoy en el reducer");
      return {
        ...state,
        loading: true,
        nameCoctel: action.payload.nameCoctel,
      };
    }
    case 'FETCH_COCTEL_NAME_SUCCESS': {
      console.log("activo success del reducer",action.payload.data);
      return {
        ...state,
        loading: false,
        nameCoctel: action.payload.data,
      };
    }
    case 'FETCH_COCTEL_NAME_FAILED': {
      console.log("activo failed del reducer");
      return {
        ...state,
        loading: false,
        nameCoctel: action.payload.error,
      };
    }
    default:
      return state;
  }
};

export default coctelReducer;


mi sagas

import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchCoctelNameSuccess, fetchCoctelNameFailed, fetchCoctelNameStart } from '../actions/actions';

function* fetchCoctelNameGenerator(action) {
  try {
    const { nameCoctel } = action.payload;
    const url = `https://api.api-ninjas.com/v1/cocktail?name=${nameCoctel}`;
    const headers = {
      method: 'GET',
      'X-Api-Key': '+m6oiBjVoWBGJcUs96gIMA==SgGhz4SrKAqSM1Fu',
      'Content-Type': 'application/json',
    };

    const response = yield fetch(url, { headers });
    const data = yield response.json(); // Espera a que la promesa se resuelva
    console.log("datos en el sagas",data);
    console.log("en el sagas 2",data[0]);
    console.log("en el sagas 3",data[0].name);
    yield put(fetchCoctelNameSuccess(data[0]));
  } catch (response) {
    yield put(fetchCoctelNameFailed(response));
  }
}

function* mySaga() {
  yield takeEvery('FETCH_COCTEL_NAME_START', fetchCoctelNameGenerator);
}

export default mySaga;
import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchCoctelNameSuccess, fetchCoctelNameFailed, fetchCoctelNameStart } from '../actions/actions';

function* fetchCoctelNameGenerator(action) {
  try {
    const { nameCoctel } = action.payload;
    const url = `https://api.api-ninjas.com/v1/cocktail?name=${nameCoctel}`;
    const headers = {
      method: 'GET',
      'X-Api-Key': '+m6oiBjVoWBGJcUs96gIMA==SgGhz4SrKAqSM1Fu',
      'Content-Type': 'application/json',
    };

    const response = yield fetch(url, { headers });
    const data = yield response.json(); // Espera a que la promesa se resuelva
    console.log("datos en el sagas",data);
    console.log("en el sagas 2",data[0]);
    console.log("en el sagas 3",data[0].name);
    yield put(fetchCoctelNameSuccess(data[0]));
  } catch (response) {
    yield put(fetchCoctelNameFailed(response));
  }
}

function* mySaga() {
  yield takeEvery('FETCH_COCTEL_NAME_START', fetchCoctelNameGenerator);
}

export default mySaga;





DATOS QUE VEO EN EL INSPECTOR CUANDO ENVIO EL DATO (DEBE HACERSE SIN CORS EN EL NAVEGADOR , EN LINUX hacer esto en la terminal google-chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security)


llamada:
https://api.api-ninjas.com/v1/cocktail?name=whisky
Request Method:
GET
Status Code:
200
respuesta:
[
    {
        "ingredients": [
            "1 1/2 oz Japanese Whisky (such as suntory toki)",
            "3/4 oz Bianco Vermouth, Dolin",
            "1/2 oz Amaro Montenegro",
            "1 ds Bitters, Angostura orange",
            "1 twst Lemon peel (garnish)"
        ],
        "instructions": "Stir, up, coupe or Nick and Nora, garnish lemon peel.",
        "name": "yamabuki whisky cocktail"
    },
    {
        "ingredients": [
            "2 oz Islay Scotch",
            "3/4 oz Oloroso sherry",
            "1 bsp Maple syrup",
            "6 ds Cherry Bitters (or use 1 bsp of Cherry Heering)"
        ],
        "instructions": "Stir, strain to lowball with big ice. Garnish with lemon zest.",
        "name": "whisky in church"
    },
    {
        "ingredients": [
            "1 1/2 oz Ginger Wine",
            "1 1/2 oz Blended Scotch"
        ],
        "instructions": "Stir together without ice.",
        "name": "whisky mac"
    }
]
4
  • Debes editar tu pregunta para agregar más detalles. La zona de comentarios es para aclaraciones: como verás, tu código es ilegible aquí.
    – padaleiana
    Commented el 12 sept. 2023 a las 19:09
  • llevas razón , dejo la actualización del codigo en este enlace, (ahora se consigue que se pinte el nombre del coctel al escribirlo y darle al boton , pero!, salta un error , por lo que he visto es , por como se llama a las propiedades del objeto de respuesta pero no se como solucionarlo, debe hacerse sin hooks y con componentes de clase gracias) github.com/Alejandrobermejo16/RepositorioAprendizaje/tree/…
    – Alejandro
    Commented el 13 sept. 2023 a las 5:24
  • Ya he dado con una solución provisional que no se si es del todo correcta o se puede hacer mejor desde el sagas quizás la he subido a github , pero basicamente la solucion es cambiar la forma en que representas el objeto: incorrecta -> <p>{nameCoctel.instructions}</p> correcta -> <h1>{JSON.stringify(nameCoctel.name)}</h1> si alguien encuentra una solucion mas legible por favor ponerlo por aquí gracias a todos. tambien dejo la pagina donde lo he visto bobbyhadz.com/blog/react-objects-are-not-valid-as-react-child
    – Alejandro
    Commented el 13 sept. 2023 a las 10:10
  • El código siempre debe estar presente en la pregunta (o en la respuesta, si es una respuesta). Los enlaces pueden caer. Recuerda además que el formato del sitio, justamente, es de preguntas y respuestas.
    – padaleiana
    Commented el 13 sept. 2023 a las 10:59

2 respuestas 2

0

fijate que que tienes un input para meter el nombre del coctel y fijate en lo que estás mandando al endpoint: introducir la descripción de la imagen aquí

Estás seguro que eso es lo que quiere recibir el endpoint de la api? en cada espacio setea un "%20" y no pinta nada porque no te está devolviendo nada el endpoint

0

gracias por la respuesta, voy a subirlo por capturas ya que no me deja o no conozco como copiar el codigo sin pasar el limite de caracteres. esa llamada que me indicas , ami no me da respuesta solamente si tengo el navegador por cors , y lo que si es cierto es que al poner el espacio aparece en la llamada 20% pero me devuelve aun asi los ingredientes que es el fin de la app , el formato que devuelve debo adecuarlo , pero en este caso , lo importante es que me devolviera algo , aún así, no controlo aún el tema , y estaré encantado de ver mejores soluciones , gracias (: introducir la descripción de la imagen aquí

la izq es el navegador con coors y la derecha sin coors

para desactivar coors -> abrir terminal en mi caso en ubutnu , abrir terminal y poner google-chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.