Question

我的问题很简单，我如何获得城市和国家，使用Redux在URL上使用多个参数获取axios？

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
});

redurs

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)

在组件内调用您的操作

如何使用参数在Redux上的weather API中获取数据？

1 个答案: