P.S. I’m in my second week learning React at work. I see value here, but I find it a little bothersome that the community advises premature generalization as a matter of course. The tried and true wisdom is, code for the specific case in front of you, and generalize when you actually encounter duplication. Otherwise you’ll be likely to (in the words of the great Sandi Metz) create the wrong abstraction.

In any case, I used this piece to stitch together what I think is a simpler implementation than all this makeActionCreator business.

const expandSection = (sectionId) => { type: 'EXPAND_SECTION', sectionId }
const contractSection = (sectionId) => { type: 'CONTRACT_SECTION', sectionId }
export default connectComponent(
SectionComponent,
mapStateToProps, // Defined elsewhere
expandSection, // action creator 1
contractSection // action creator 2
);
// "Library" Code to be extracted
function connectComponent(component, mapStateToProps, ...dispatchers) {
return connect(
mapStateToProps,
createMapDispatchToProps(...dispatchers),
)(component);
}
function createMapDispatchToProps(...functions) {
const mapDispatchToProps = {};
functions.forEach((fn) => mapDispatchToProps[fn.name] = fn);
return mapDispatchToProps
}

Advocate of Score Voting and Approval Voting. Software engineer. Father. Husband. American.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store