React/redux - 传递actionCreators深层次

Question

我想知道其他人如何处理将redux动作创建者从智能顶级组件传递到许多较低级别的哑组件而不会使他们的道具定义膨胀.

例如,遵循这个关于redux的优秀教程,如果我将动作创建者列表传递给道具,就像这样

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

...

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

然后在我的Voting组件中,我可以访问actionCreators,这非常酷.

但是,如果我说20个用于投票的actionCreator及其所有子组件,例如.

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组合在一起,而不需要在每一步都没有大量的样板？我在任何教程/示例中都没有看到任何内容......

Answer 1

只需将树下的组件连接到Redux.
我们过分强调示例中的"顶部的一个容器".
当我们谈论非常简单的应用程序时,这是有道理的.

对于任何复杂的应用程序,只要传递道具变得乏味,connect()下面的组件. 我在我的免费视频中介绍了这一点:请参阅提取容器组件和接下来的几个视频.