I have a function in the actions of Redux which obtains a json with the data of an API of the Climate, my problem is how I can connect my component correctly with Redux and in what way I can pass the parameters of the ciudad
and the pais
I have a component that makes a promise to the Climate API, and returns a json with the data, this component works correctly
this is the AddClima.js component
import React from 'react'
import ClimaInfo from '../componentes/ClimaInfo';
//import basedatos from '../firebase/firebase';
import axios from 'axios';
const API_KEY = "a3de5cffde10c377d199699b3da6fc6f";
class AgregaClima extends React.Component {
state = {
temperatura:undefined,
ciudad:undefined,
pais:undefined,
humedad:undefined,
descripcion:undefined,
correo:''
}
obtieneClima = (e) => { e.preventDefault();
const ciudad = e.target.elements.ciudad.value.trim();
const pais = e.target.elements.pais.value.trim();
fetch('//api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${API_KEY}&units=metric')
.then( res => {
return res.json();
}).then( dato => {
console.log(dato);
this.setState({
temperatura: dato.main.temp,
ciudad: dato.name,
pais: dato.sys.country,
humedad: dato.main.humidity,
descripcion: dato.weather[0].description,
});
})
}
render() {
return (
<div>
<center>
<form onSubmit={this.obtieneClima}>
<input
className='entrada-clima'
type='text'
name='ciudad'
placeholder='Mexico City'
style={{width:'200px',
height:'50px', fontSize:'2rem' }}
>
</input>
<input
className='entrada-clima'
type='text'
name='pais'
placeholder='MX'
style={{width:'200px',
height:'50px', fontSize:'2rem' }}
>
</input>
<button>un pronostico</button>
<div><h2>{this.state.correo}</h2></div>
</form>
</center>
<div>
<ClimaInfo
temperatura={this.state.temperatura}
ciudad={this.state.ciudad}
pais={this.state.pais}
humedad={this.state.humedad}
descripcion={this.state.descripcion}
/>
</div>
<center>
<a
href="http://openweathermap.org/help/city_list.txt"
target="_blank"
> Lista de Ciudades en la API </a>
</center>
</div>);
}
}; export default AgregaClima;
my actions , the parameters city and country need to be passed but I do not understand in what way, this file is not implemented yet
import axios from 'axios';
import configuraTienda from '../tienda/configuraTienda';
const API_KEY = "a3de5cffde10c377d199699b3da6fc6f";
export function obtieneClima (ciudad, pais) {
const ROOT_URL = '//api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${API_KEY}&units=metric';
const req = axios.get(ROOT_URL);
console.log('request', req);
}
export const cambiaCLima = (clima) ({
type: 'CAMBIA_CLIMA',
clima
});
My problem is how I can connect my function obtainsClimate from Redux