Мне интересно, как другие люди обрабатывают создателей action с уменьшающим эффектом от интеллектуального компонента верхнего уровня до многих немых компонентов более низкого уровня без раздувания их определений реквизитов.
Например, после этого превосходного учебника по сокращению, если я передам список создателей действий в реквизиты, подобные этому
import Voting from './Voting';
import * as actionCreators from '../action_creators';
...
export const VotingContainer = connect(
mapStateToProps,
actionCreators
)(Voting);
то в моем компоненте Voting у меня есть доступ к actionCreators, который действительно крут.
Но если я скажу 20 actionCreators, которые используются в Voting и всех его дочерних компонентах, например.
Voting -> VotingContainer -> VotingDetail -> VotingFoo -> VotingBar
тогда я получаю функции рендеринга, которые выглядят как
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} />
}
}
Есть ли наилучшая практика для этой ситуации, способ группировать actionCreators вместе так или иначе без большого количества шаблонов на каждом шагу? Я ничего не видел ни в одном из уроков/примеров...