我想知道其他人如何处理将 redux 动作创建者从智能顶级组件传递到许多较低级别的哑组件而不膨胀其 props 定义。
例如,以下这个关于 redux 的优秀教程 http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html#the-client-application,如果我像这样将动作创建者列表传递到道具中
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 分组在一起的方法,而无需在每个步骤中使用大量样板?我在任何教程/示例中都没有看到任何内容......
只需将树下面的组件也连接到 Redux 即可。
我们在示例中过分强调“顶部一个容器”。
当我们谈论非常简单的应用程序时,这是有道理的。
对于任何复杂的应用程序,一旦传递道具变得乏味,connect()
下面的组件。我在我的免费视频中介绍了这一点:请参阅提取容器组件 https://egghead.io/lessons/javascript-redux-extracting-container-components-filterlink?series=getting-started-with-redux以及接下来的几个视频。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)