React/redux - 传递 actionCreators 多个层次 [英] React/redux - passing actionCreators many levels deep

问题描述

我想知道其他人是如何处理从智能顶级组件传递到许多低级哑组件的 redux action creators 的，而不会膨胀他们的 props 定义.

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.

例如，关注 这个关于 redux 的优秀教程，如果我像这样将动作创建者列表传递到道具中

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);

然后在我的 Voting 组件中，我可以访问真的很酷的 actionCreators.

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

但是如果我说 20 个用于 Voting 及其所有子组件的 actionCreators，例如.

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} />
    }
}

是否有针对这种情况的最佳实践，一种以某种方式将 actionCreators 组合在一起而每一步都没有大量样板的方法?我在任何教程/示例中都没有看到任何内容...

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...

推荐答案

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

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.

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

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.

这篇关于React/redux - 传递 actionCreators 多个层次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！