React/redux - passing actionCreators many levels deep

Question

I'm wondering how other people are handling passing redux action creators from a smart top-level component down to many lower level dumb components without bloating their props definitions.

For example, following this excellent tutorial on redux, if I pass a list of action creators into the props like so

import Voting from './Voting';
import * as actionCreators from '../action_creators';

...

export const VotingContainer = connect(
    mapStateToProps,
    actionCreators
)(Voting);

then in my Voting component I have access to the actionCreators which is really cool.

But if I have say 20 actionCreators that are used in Voting and all of its child components, eg.

Voting -> VotingContainer -> VotingDetail -> VotingFoo -> VotingBar

then I end up with render functions that look like this

class Voting extends React.Component {
    render(){
        <VotingContainer
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator15={this.props.actionCreator15} />
    }
}

class VotingContainer extends React.Component {
    render(){
        <VotingDetail
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator12={this.props.actionCreator12} />
    }
}

.
.
.

class VotingFoo extends React.Component {
    render(){
        <VotingBar
            actionCreator1={this.props.actionCreator1}
            .
            .
            .
            actionCreator6={this.props.actionCreator6} />
    }
}

Is there a best practice for this situation, a way to group the actionCreators together somehow without a lot of boilerplate at each step ? I haven't seen anything in any of the tutorials/examples...

Answer 1

Just connect components below the tree to Redux too.
We over-emphasize “one container at the top” in the examples.
This makes sense when we’re talking about very simple apps.

For any complex app, as soon as passing props gets tedious, connect() components below. I cover this in my free videos: see Extracting Container Components and the next several videos.