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
}