If you write react + redux code all day, chances are your fingers are used to typing out this pattern of , , and : mapStateToProps mapDispatchToProps connect As described in the redux docs: this pattern produces a “Container” which is a component that listens to changes in redux store and re-renders automatically. It’s ok. The functions are re-usable, everything is straightforward, what’s not to like? As an experiment, I wrote this, and ended up keeping it because it made the boilerplate more concise: import {connect} from 'react-redux' const reduxify = (container) =>connect(container.mapStateToProps,container.mapDispatchToProps,)(container.render) All we’re doing is passing in , , and the function together in one go instead of using a two-step chained function call. mapStateToProps mapDispatchToProps render Here’s the new, shorter syntax which uses the function to create a “Container”: reduxify What was roughly ~9 lines of boilerplate turns into about~6 lines, but more importantly, it doesn’t reduce the nice qualities that the original had: testability & easy re-use of functions. Testing & Re-use Maybe you want to re-use in more than one place, or you want to unit test it, not to worry! mapStateToProps They’re just functions, you can define them wherever you want, import them, and plop them into . Object allows it to stay clear and concise. reduxify property value shorthand import {mapStateToProps} from './other-component.js' const Component = reduxify({mapStateToProps,render: (props) =><div>...</div>}) Here’s an example of defined outside the reduxify call: mapStateToProps A helpful reader pointed out that doesn’t even have to be a function if you use action creators: mapDispatchToProps Download the library reduxify Haha just kidding, I’m not going to give you an package for a 6 line function, just :) npm copy/paste it
