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"
}
]