Action in Redux to pass a URL with the Weather

1

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

    
asked by Gerardo Bautista 03.05.2018 в 19:54
source

0 answers