Как получить данные в API погоды на Redux с параметрами?

Question

У меня простой вопрос: как я могу получить город и страну при получении Axios с несколькими параметрами на URL с Redux?

в ROOT_URL параметры город и страна изменение

const URL = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`;

мои действия

import axios from 'axios';
const API_KEY = "a3de5cffde10c377d199699b3da6fc6f";

export function getWeather (city, country) { 
    const URL = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`;

    return(dispatch)=>{
        return axios.get(URL)
        .then(res => {
            dispatch(changeWeather(res));
        }).catch(err =>{
            console.log('error', err);
        });

    }
}
const changeWeather = weather => ({
    type: 'CHANGE_WEATHER',
    weather
});

Редукторы

const weatherDefaultState = {
    city:undefined, 
    country:undefined, 

};
export default (state=weatherDefaultState,action)=>{
    switch(action.type) { 
        case 'CHANGE_WEATHER':
        return {...state, weather: action.weather}
        default: return state;
    }
};

и компонент с redux работает, но кнопка не выполняет никаких действий. В чем ошибка?

   import React from 'react';
import {connect} from 'react-redux';
import { getWeather } from '../actions/weather';
class Weather extends React.Component {

    loadWeather = () => { 
        const API_KEY = 'a3de5cffde10c377d199699b3da6fc6f';
        const URL = `http://api.openweathermap.org/data/2.5/weather?q=Merida,mx&appid=${API_KEY}&units=metric`;

        return(dispatch)=>{
            return axios.get(URL)
            .then(res => {
                dispatch(getWeather(res));
            }).catch(err =>{
                console.log('error', err);
            });

        }
    }
    render() {
        return(<div>
            <WeatherForm
                 weather={this.props.weather}
                 handleClick={this.loadWeather}
            />
            </div>
        )
    }
}

class WeatherForm extends React.Component {
    render() {
        return(<div>
            <button
            className='boton-color'
            style={{backgroundColor:'darkcyan'}}
            onClick={()=>{this.props.handleClick() }} 
            type="button" >
            <p 
            className="card-text-correo"> 
            clima </p></button>
            </div>)
    }
}
const mapStateToProps = (state) => {
    return state
};
export default connect(mapStateToProps)(Weather);

Answer 1

Согласно вашему коду, вы вообще не делаете HTTP-вызов. Внутри вашей функции loadWeather, которая является просто методом компонента, вы возвращаете функцию, которая принимает dispatch в качестве аргумента, это не правильно. У вас есть асинхронное действие, которое отлично (я полагаю, что вы правильно установили и подключили redux-thunk .

Итак, вам нужно получить доступ к этому действию внутри вашего компонента. Это должно быть сделано с помощью модуля connect, который вы установили и подключили. Но для подключения действий к реквизиту требуется еще один параметр.

const mapStateToProps = (state) => {
    return state
};

/* This one you should add */
const mapDispatchToProps = dispatch => {
   return {
      getWeatherDispatch: (city, country) => {
          dispatch(getWeather(city, country))
      }
   }
};
export default connect(mapStateToProps, mapDispatchToProps)(Weather);

В результате вы можете вызвать ваше действие внутри компонента, используя this.props.getWeatherDispatch(yourCity, yourCountry)