Hoverable with mapDispatchToProps and mapStateToProps

[gwailoTr0n5000]

I've followed your instructions for setup but I wanted to combine it with a more complex component and I can't seem to figure out the last part where I used your connectHoverable method.

The end of your example file is as such:

export default connectHoverable(MyHoverableComponent);

However, in my code I have:

export default connect( mapStateToProps, mapDispatchToProps )(MyNotQuiteHoverableYetState);

I'm not quite sure how to mesh my code with this last piece of yours such that I can add my own mapStateToProps and mapDispatchToProps with the hoverable components internal ones. Any help is much appreciated! I'm hoping I can get this to meld with my component without having to make another wrapper etc.

Thanks!

[gwailoTr0n5000]

It kind of looks like I could re-write the code to be the following to support passing along mapStateToProps and mapStateToProps to combine with your methods:

`

import { connect } from 'react-redux'; import { hover, unhover, } from './action';

const connectHoverable = ( component, componentMapStateToProps, componentMapDispatchToProps) => {

const mapStateToProps = (state, ownProps) => ({ hovered: ownProps.hoverId && state.hover ? state.hover[ownProps.hoverId] : false, ...componentMapStateToProps, });

const mapDispatchToProps = (dispatch, ownProps) => ({ onMouseEnter: () => (ownProps.hoverId ? dispatch(hover(ownProps.hoverId)) : null), onMouseLeave: () => (ownProps.hoverId ? dispatch(unhover(ownProps.hoverId)) : null), componentMapDispatchToProps, });

return connect( mapStateToProps, mapDispatchToProps, )(component); };

export default connectHoverable; `

Not sure if this would work but seems to allow for combining as long as there aren't collisions between the names of the two combined objects.

[justin-westra]

Super old but wouldn't you have to call both like this:

...componentMapStateToProps(state, ownProps) ...componentMapDispatchToProps(dispatch, ownProps)