React-Redux - failing to show props on view page - reactjs

Question

EDIT: Ive changed my return to an object, yet still i'm getting empty props.
console.log of mapStateToProps(state) shows that temperature is empty. I am assuming I am getting back a non changed state, temperature from my axios call is not returned to my weatherPage.js.
my whole environment is working fine, im just trying to make an axios get request.
I'm having a bit of a difficulty passing my object through the Redux lifecycle, from the actions to the reducer while keeping the propTypes validation method and trying to use Object.assign() (which is truly the right way of mutating the state with a single deep copy as Dan Abramov noted.)
The error:
my props are empty. The axios call I've made in src/actions/weatherActions.js is not showing up as a prop.weatherDetails.temperature in src/components/weatherPage.js
, it returns my default state.
I'm new to ES6 and Redux, I've included propTypes into my page and I'm having bit of an issue with this, I think the issue comes from supplying the right state that comes from the action.
When the choose button is pressed i'm supposed to receive the temp_c (axios calls this json)
src/components/weatherPage.js
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router';
import * as WeatherActions from '../../actions/weatherActions';
class WeatherPage extends React.Component {
render() {
return (
<div>
<h2>temps: {this.props.weatherDetails.temperature}</h2>
<input
type="submit"
onClick={this.onClickSave.bind(this)}
value="CHOOSE"/>
</div>
);
}
onClickSave() {
WeatherActions.getWeather(this.props.dispatch);
}
WeatherPage.propTypes = {
weatherDetails: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
weatherDetails: state.weathers.weatherDetails
};
}
export default connect(mapStateToProps)(withRouter(WeatherPage));
Since this.props.weatherDetails.temperature shows my current state, I know that problem lies between the action and the reducer.
src/actions/weatherActions.js
import axios from 'axios';
export const ActionTypes = {
WEATHER: { LOAD_WEATHER: 'WEATHER.LOAD_WEATHER' } };
export function getWeather(dispatch) {
console.log('in getWeather method');
console.log('this is getWeather dispatch: ', dispatch);
axios({
url: 'http://api.weatherunlocked.com/api/trigger/32.08,34.78/current%20temperature%20gt%2016%20includecurrent?app_id=ba2f68f0&app_key=0356747cc4d1d4ba0dd5cc25a0c86743',
method: 'get'
}).then(function (response) {
//console.log('in the then func with this res: ', JSON.stringify(response));
dispatch({
type: ActionTypes.WEATHER.LOAD_WEATHER,
temperature: response.CurrentWeather.temp_c
},
function () {
console.log('dispatch completed');
});
});
console.log('end of class getWeather');
I'm performing a simple axios call, yet i'm not sure if i'm dispatching the 'payload' (temperature: response.CurrentWeather.temp_c) correctly to appear through the reducer and back into view.
Here is my reducer:
src/reducers/weatherReducer.js
import * as WeatherActions from '../actions/weatherActions';
const initialState = {
weatherDetails: {
area: '',
temperature: 'sdf'
}
};
function WeatherReducer(state = initialState, action) {
console.log('in WeatherReducer, this is action: ' + JSON.stringify(action));
switch (action.type) {
case WeatherActions.ActionTypes.WEATHER.LOAD_WEATHER:
return [...state, Object.assign({}, action.temperature.data)];
default:
return state;
}
}
export default WeatherReducer;
What am I missing here on this build?

Answer 1

You state object must be returned as an object rather than an array from the reducer like
switch (action.type) {
case WeatherActions.ActionTypes.WEATHER.LOAD_WEATHER:
return Object.assign({}, state, action.temperature.data);
default:
return state;
}