Как получить данные в API погоды на Redux с параметрами?
Мой вопрос прост: как я могу получить город и страну при выборке 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.info('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;
}
};
а компонент с сокращение запускается, но кнопка не выполняет никаких действий, в чем ошибка?
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.info('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);
Ответы 1
Согласно вашему коду, вы вообще не делаете HTTP-вызов.
Внутри вашей функции loadWeather, которая является просто методом компонента, вы возвращаете функцию, которая принимает dispatch в качестве аргумента, это неверно.
У вас есть асинхронное действие, и это здорово (я полагаю, вы правильно установили и подключили редукционный преобразователь.
Итак, вам нужно получить доступ к этому действию внутри вашего компонента. Это нужно сделать с помощью модуля 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).
Из документы: «Если вы не хотите подписываться на обновления магазина, передайте null или undefined вместо mapStateToProps».
Прежде всего я заметил, что у вас есть
loadWeatherв компоненте, который выполняет то же самое, что иgetWeatherв функции, но пытается отправить неизвестное действиеobtieneClima. Весь смысл ваших действий состоит в том, чтобы делегировать им эту функциональность и удалить ее из компонента.