score:4

Accepted answer

1) two "export default"

you're doing two export default into App.js.

Try changing:

export default class App extends Component

to

const App = class App extends Component.

And then:

...

App.defaultProps = {
    info:{
      path:'/'
    }
};
...
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

2) "defaultProps" and "ownProps":

As mapStateToProps is being called before the component construction (when defaultProps are defined), the ownProps is empty. You can try two options:

1) this workaround:

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

function mapStateToProps(state, ownProps) {
  console.log('state')
  console.log(state)
  console.log('ownProps')
  console.log(ownProps)

  const path = ownProps.info && ownProps.info.path ? ownProps.info.path : App.defaultProps.info.path;

  return {
    node: path ? state.TreeNodeReducer.tree[path] : {}
  };
}

2) apparently, ownProps first call is feeded with the inline defined props. So, you can call <App /> this way in the index.js:

<App info={{ path:'/' }} />

Anyway, after solving this, another error is thrown (Cannot read property '/' of undefined) when trying to read tree from the reducer (doesn't exist there).

score:14

I found a better way to set defaultProps,

Because connect() returns a new component. If you'd like defaultProps to be present on it, you need to put defaultProps on it:

App = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

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

export default App

This would work!


Related Query

More Query from same tag