redux를 사용하여 반응 객체에서 데이터를 수신합니다.

Question

외부 API에서 수신 한 JSON을 구문 분석하려고합니다.

내 감속기는 다음과 같습니다

import { RECEIVED_FORECAST } from '../actions/index'; 
export default function ForecastReducer (state = [], action) { 

switch (action.type) { 
    case RECEIVED_FORECAST: 
    return Object.assign({}, state, { 
     item: action.forecast 
    }) 
    default: 
    return state; 
    } 
} 

다음 주 감속기 같은 간다 :

import { combineReducers } from 'redux'; 
import ForecastReducer from './forecast_reducer'; 

const rootReducer = combineReducers({ 
    forecast: ForecastReducer 
}); 

export default rootReducer; 

및 컨테이너가 의

import React, { PropTypes, Component } from 'react'; 
import { connect } from 'react-redux'; 

class WeatherResult extends Component { 

render() { 
    const forecast = this.props.forecast.item; 
    {console.log('almost: ', forecast)} 
    return (
    <div> 
     <h1> </h1> 
    </div> 
) 
} 
} 

function mapStateToProps({ forecast }) { 
    return { 
    forecast 
    } 
} 

export default connect(mapStateToProps)(WeatherResult) 

출력과 같은 거의 정확히 같은 아들 내가 생각하기에 :

almost: 
    Object 

    currently: {time: 1476406181, summary: "Drizzle", icon: "rain", nearestStormDistance: 0, precipIntensity: 0.0048, …} 

    daily: {summary: "Light rain on Saturday and Thursday, with temperatures rising to 92°F on Wednesday.", icon: "rain", data: Array} 

그래서 내 질문은 예측의 가치를 어떻게 보여줄 수 있습니까? 현재 예측을 요약 해 봅시다. summary?

1) 난 그냥받을} {내에서 삽입하려고하면 : 나는 같은 매핑을 사용할 수 없습니다)

2 ')'forecast.currently : '형식 오류 정의되지 않은은 (평가 대상 아니다' json에 다른 구성 요소가 추가되었을 수 있습니다.

모든 파일을 매핑하지 않고이 속성에 직접 접근 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

문제는 사용자가 데이터를 요청하고 있다는 것입니다. 그것은 즉시 완료되지 않습니다. 날씨 데이터가 도착하기를 기다리는 동안 앱이하는 일에 대해 생각해보십시오.

뭔가가 표시됩니다. 귀하의 경우 아직 도착하지 않은 데이터를 표시하려고하기 때문에 렌더링 방법이 실패합니다.

솔루션 :

render() { 
    const forecast = this.props.forecast; 
    const text = forecast && forecast.item.currently.summary || 'loading...'; 
    return (
    <div> 
     <h1>{text}</h1> 
    </div> 
) 
} 
} 

이 방법은 이미 데이터가있는 경우이 확인되지 않은 경우, 당신은 유용한 무언가를 보여줍니다.