Allow connect() to hoist non-react statics from wrapped component

[erikras]

• Adds dependency on hoist-non-react-statics
• Fixes Maintain static functions #53

[gaearon]

Out in 3.1.0.

[erikras]

Hmm... The way greenkeeper references each PR with a hyperlink might get old. Do we really need to know about every public repo that merged this?

[gaearon]

I don't really mind. The references are because it mentions release notes which link to this PR.

[erikras]

Yes, that's what I meant. It uses the commit text, which should reference issues and PRs it fixes/merges.

I guess as long as it doesn't generate emails. 😄

[CrocoDillon]

This is sweet, but how do you get redux' state and dispatch in the static methods?

I was hoping that since the static method is hoisted I could just get the connected component using this in the static method. However react-redux calls onEnter hooks with the route as this. I can get the constructor of the connected component (this.component) but not the instance. ¯_(ツ)_/¯

Using it like this:

// routes.jsx
<Route path="/" component={MyComponent} onEnter={MyComponent.onEnter}>

// MyComponent.jsx
class MyComponent extends Component {
  static onEnter() {
    // I need to access store.getState and store.dispatch here
  }
  render() {
    // ...
  }
}

However weird it is to access instance specific stuff in a static method. It's making server-side rendering a lot easier when you can call component methods that dispatch actions before calling ReactDOMServer.renderToString(...).

[gaearon]

It's better to create a new issue than post in a not quite related one. Static methods don't have dispatch because it only exists in a specific rendering context. For example in a server rendered app you would render components with a different store instance on every request. This is why it doesn't make sense for static methods to have access to the dispatch function.

What I think you can do is define createRoutes(store). It would use the store to provide dispatch to the hook: onEnter={(...args) => MyComponent.onEnter(...args, store.dispatch)}.

Then you would call createRoutes(store) when rendering with your store instance. The component would receive dispatch as the last argument.

[CrocoDillon]

Sorry about that, found this PR after some searching and thought it was related enough since the hoisting is exactly what I was looking for. And yeah it did feel dirty abusing a static method like that, anyway I thought the method was hoisted to the connected component instance (and as such no longer static). I looked wrong though, it's still static so you're right... what I wanted doesn't make any sense.

The createRoutes(store) seems like the way to go! And it's really awesome that you respond so quickly :D Thanks a lot!