Set default props for a react Component
<p>I want my app component has a default props , and use that props in  <code>mapStateToProps</code>.</p>
<h2>containers/App.js</h2>
<pre><code>import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Footer from '../components/Footer';
import TreeNode from '../containers/TreeNode';
import Home from '../containers/Home';
import * as NodeActions from '../actions/NodeActions'

export default class App extends Component {

  constructor(props, context) {
    super(props, context)
    this.props = {
      info:{
        path:'/'
      }
    }
  }

  componentWillMount() {
    // this will update the nodes on state
    this.props.actions.openNode('/');
  }

  render() {
    const { node , actions} = this.props
    console.log(this.props)

    return (
      &lt;div className=&quot;main-app-container&quot;&gt;
        &lt;Home /&gt;
        &lt;div className=&quot;main-app-nav&quot;&gt;Simple Redux Boilerplate&lt;/div&gt;
        {node.childNodes &amp;&amp;
          &lt;div&gt;{node.childNodes.map(node =&gt; &lt;TreeNode key={info.path} info={node} tree={tree} actions={actions} /&gt;)}&lt;/div&gt;
        }
        {!node.childNodes &amp;&amp;
          &lt;div&gt;no children&lt;/div&gt;
        }
        {/*&lt;Footer /&gt;*/}
      &lt;/div&gt;
    );
  }
}

App.defaultProps = {
    info:{
      path:'/'
    }
};

function mapStateToProps(state, ownProps) {
  console.log('state')
  console.log(state)
  console.log('ownProps')
  console.log(ownProps)
  return {
    node: ownProps.info.path? state.TreeNodeReducer.tree[ownProps.info.path] : {}
  };
}


function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(NodeActions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
</code></pre>
<h2>reducers/TreeNodeReducer.js</h2>
<pre><code>import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes';
import UUID from &quot;node-uuid&quot;

const initialState = {
  open: false,
  info: {} 
}

class NodeModel {
    constructor(path, type, right) {
        this.name = path;
        this.path = path;
        this.type = type;
        this.right = right;
    }
}

let lastId = 0;

function getFileList() {
  var testNodes = []
  for (var i=0; i&lt; 3; i++) {
    testNodes.push(new NodeModel(lastId,'d', i.toString()))
    lastId++;
  }

  return testNodes
}


const getNodes = (state, action) =&gt; {
  var { path } = action
  var tree = state.tree ? state.tree : {}
  tree[path] = getFileList(path)
  return {
    ...state,
    tree:tree
  };
};

export default function (state = initialState, action) {
  switch (action.type) {
    case OPEN_NODE:
      return { ...getNodes(state, action), open:true };
    case GET_NODES:
      return getNodes(state, action);
    case CLOSE_NODE:
      return {
        ...state,
        open:false
      };
    default:
      return state;
  }
}
</code></pre>
<hr />
<p>I have tried :</p>
<h3>1: constructor</h3>
<pre><code>  constructor(props, context) {
    super(props, context)
    this.props = {
      info:{
        path:'/'
      }
    }
  }
</code></pre>
<h3>2: defaultProps:</h3>
<pre><code>App.defaultProps = {
    info:{
      path:'/'
    }
};
</code></pre>
<p>but none of them work...
log always is:</p>
<p><a href="https://i.stack.imgur.com/Hxu9e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hxu9e.png" alt="enter image description here" /></a></p>
<p><code>state</code> has the correct default value, but <code>ownProps</code> is empty...</p>
<p>PS:Project is <a href="https://github.com/eromoe/simple-redux-boilerplate" rel="nofollow noreferrer">here </a>.</p>