Okay, I see where you’re going with that and how it could work, but I don’t think your gist is…
Matt Parrish
1

Oh it does! You can see these lines:

export default connect(  
(state, { selector = defaultSelector }) => ({
state: selector(state)
}),
dispatch => ({ dispatch }),
)(WithStore);

The 2nd parameter of mapStateToProps is the props of the component. The selector prop is simply not used in the WithStore component itself so that’s why it’s not in the destructuring of WithStore.

I have mixed feelings about including mapDispatchToProps to the component itself. It would make things a bit more repetitive, e.g.

// assuming the actions are imported
<WithStore selector={...} dispatch={{ updatePhoto }}>
{ (props) => <Component updatePhoto={props.updatePhoto} /> }
</WithStore>

Compared to just exposing dispatch:

<WithStore selector={...}>
{ (props, dispatch) =>
<Component
updatePhoto={(photo) => dispatch(updatePhoto(photo))}
/>
}
</WithStore>

It doesn’t repeat the updatePhoto. So it’s a little cleaner in my opinion, though it also comes at a downside of having to define a wrapper function, so I can also see why one might prefer the mapDispatchToProps better. Nonetheless since this is pretty much more like a DIY article, so it’s totally up to you how you want to use this :)

I will update the gist with the comment to make it clearer (and probably add an example of how you can use mapDispatchToProps too). Thank you for the feedback!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.