2017-02-22 58 views
0

Я пытаюсь вытащить api с помощью redux, но я не могу обвести вокруг него голову. Я постоянно получаю ошибку «данные об ошибках не определены».Данные не определены в redux при потянув api

Я использую приложение create-react-app с добавлением нескольких библиотек, таких как thunk, logger и middleware. Если я забыл упомянуть что-то пожалуйста, так сказать, что я могу обновить вопрос

это мое действие

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: линии, где появляется сообщение об ошибке. это редуктор

Ошибка в ./src/reducers/weather-apiReducers.js

6:15 ошибка «данные» не не определены не-UNDEF 14: 5 предупреждения Прогнозного кейса по умолчанию по умолчанию случая

✖ 2 проблемы (1 ошибок, 1 предупреждение)

+0

'Я постоянно получаю ошибку«данные об ошибках не определен»' - какая строка кода отвечает за эту постоянную ошибку? –

ответ

2

переменная 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 
    } 
} 
// ...