APIをプルする際にreduxで定義されていないデータ

Question

私はreduxを使用してAPIをプルしようとしていますが、私はその周りを頭で囲むことはできません。私は絶えずエラー "エラーデータが定義されていません"を取得します。

私は、サンク、ロガー、ミドルウェアのようないくつかのライブラリを追加して、create-react-appを使用しています。私は何かを言及するのを忘れてしまった場合、私は質問を更新することができるように言ってください

これは私の行動である

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

これは減速

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

EDITを兼ね備えています。デフォルトの場合のデフォルト・ケース

を期待5警告：それは./src/reducers/weather-apiReducers.jsで減速

エラーです

6：15エラー「データ」には、undefを 14を定義されていないされていません

✖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 
    } 
} 
// ...