javascript - 拉取api时redux中未定义数据

Question

我正在尝试使用 redux 拉取 api，但我无法理解它。我不断收到错误“错误数据未定义”。

我正在使用 create-react-app 添加了一些库，如 thunk、记录器和中间件。如果我忘记提及某些内容，请说出来，以便我更新问题

这是我的行动

import axios from "axios";

export function fetchWeatherData() {
return function (dispatch) {
    axios.get('http://api.openweathermap.org/data/2.5/forecast/weather?q=London&units=metric&lang=hr&APPID=example')
        .then((response) => {
            dispatch({type: "FETCH_WEATHER_DATA_FULFILLED",results: response.data})
        })
        .catch((err) => {
            dispatch({type: "FETCH_WEATHER_DATA_REJECTED", results: err})
        })
    }
}

这是 reducer

 export default function reducer(state={
    cityName: data,
    nameOfCity: null,
    weatherDescription: null,
    windSpeed: null,
    temperature: null,
    maxTemperature: null,
    minTemperature: null
}, action) {
switch (action.type){
    case "FETCH_WEATHER_DATA": {
        return {...state,
            fetching: true
        }
    }
    case "FETCH_WEATHER_REJECTED": {
        return {...state,
            fetching: false,
            error: action.results
        }
    }
    case "FETCH_WEATHER_DATA_FULFILLED": {
        return {...state,
            fetching: false,
            fetched: true,
            nameOfCity: data.city.name,
            weatherDescription: data.list[0].weather[0].description,
            windSpeed: data.list[2].wind.speed,
            temperature: data.list[0].main.temp,
            maxTemperature: data.list[0].main.temp_max,
            minTemperature: data.list[0].main.temp_min
        }
    }
}

return state;
}

这是容器

import {FormContainer} from './containers/FormContainer';
import WeatherInfo from './components/WeatherInfo';
import {connect} from "react-redux"
import {updateInfo} from './actions/weather-apiActions'
import {fetchWeatherData} from './actions/weather-apiActions'

@connect((store) => {
  return {
    cityName: store.cityName.cityName,
    nameOfCity:store.nameOfCity.nameOfCity,
    weatherDescription:store.weatherDescription.weatherDescription,
    windSpeed:store.windSpeed.windSpeed,
    temperature:store.temperature.temperature,
    maxTemperature:store.maxTemperature.maxTemperature,
    minTemperature:store.minTemperature.minTemperature,
  }
 })

 class App extends Component {

   componentWillMount(){
     this.props.dispatch(fetchWeatherData());
   }

  }

存储文件

import { applyMiddleware, createStore } from "redux"

import logger from "redux-logger"
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"

import reducer from "./reducers"

const middleware = applyMiddleware(promise(), thunk, logger())

export default createStore(reducer, middleware)

合并文件

import { combineReducers } from "redux"

    import cityName from "./weather-apiReducers"
    import nameOfCity from "./weather-apiReducers"
    import weatherDescription from "./weather-apiReducers"
    import windSpeed from "./weather-apiReducers"
    import temperature from "./weather-apiReducers"
    import maxTemperature from "./weather-apiReducers"
    import minTemperature from "./weather-apiReducers"

    export default combineReducers({
        cityName,
        nameOfCity,
        weatherDescription,
        windSpeed,
        temperature,
        maxTemperature,
        minTemperature
    })

编辑:错误显示的行。这是 reducer

./src/reducers/weather-apiReducers.js 中的错误

6:15 错误“数据”未定义 no-undef 14:5 警告 预期有默认情况 default-case

✖ 2 个问题(1 个错误，1 个警告)

Answer 1

变量data未定义。您必须使用 action.results:

// ...
case "FETCH_WEATHER_DATA_FULFILLED": {
    return {...state,
        fetching: false,
        fetched: true,
        nameOfCity: action.results.city.name,
        weatherDescription: action.results.list[0].weather[0].description,
        windSpeed: action.results.list[2].wind.speed,
        temperature: action.results.list[0].main.temp,
        maxTemperature: action.results.list[0].main.temp_max,
        minTemperature: action.results.list[0].main.temp_min
    }
}
// ...