reactjs - React/redux - 将 actionCreators 传递到多个深度级别

Question

我想知道其他人如何处理将 redux Action 创建者从智能顶级组件传递到许多较低级别的dumb组件而不膨胀其 props 定义。

例如，以下 this excellent tutorial on redux ，如果我像这样将 Action 创建者列表传递到 Prop 中

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

...

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

然后在我的投票组件中我可以访问 actionCreators，这真的很酷。

但是，如果我有 20 个用于投票及其所有子组件的 actionCreators，例如。

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 即可。
我们在示例中过分强调“顶部一个容器”。
当我们谈论非常简单的应用程序时，这是有道理的。

对于任何复杂的应用程序，一旦传递 props 变得乏味，就使用下面的 connect() 组件。我在我的免费视频中介绍了这一点:请参阅 Extracting Container Components以及接下来的几个视频。