Can't access React props modified by Redux MapStateToProps - reactjs

Question

Got undefined when trying to access this.props.state value
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
const mapStateToProps = ({ movies }) => ({
state: movies,
});
class App extends Component {
componentDidMount() {
this.props.addMovie({ title: 'Movie' }); //redux action
}
render() {
const { state } = this.props;
console.log(state.test); //Object {title: "Movie"}
console.log(state.test.title); //Uncaught TypeError: Cannot read property 'title' of undefined
return (
<div>Hello {state.test.title}!</div> //doesn't work
);
}
}
export default connect(mapStateToProps, actions)(App);
After redux complete the action i've got state object in component props
I can access it from Chrome DevTools $r.props.state.test.title but can't access it from render function
For example I can get value from this.props.params.movieID but can't get any params modified by mapStateToProps
How can I put this.props.state.test.title value in my div?

Answer 1

Inside your render function check if the title is undefined because the render function is being called before your redux action is resolving. Once your state is updated and your component renders it should show up the second time.
render() {
const { state } = this.props;
console.log(state.test);
if(state.test && state.test.title){
console.log(state.test.title);
return (
<div>Hello {state.test.title}!</div>
)
} else {
return (
<div>No movies listed</div>
);
}
}