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

2024-04-05

我想知道其他人如何处理将 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(使用前将#替换为@)

React/redux - 将 actionCreators 传递到多个深度级别 的相关文章

随机推荐

  • MXNet:nn.Activation 与 nd.relu?

    我是 MXNet 新手 我在 Python3 中使用它 他们的教程系列鼓励您定义自己的gluon blocks http gluon mxnet io chapter03 deep neural networks plumbing html
  • SSL证书无效,可能需要交叉认证

    我们有一个 WebService 并向我们的客户提供 WSDL 除使用 Lotus Notes 的客户外 所有客户 数百名 都对我们的服务没有任何问题 当他们的代码尝试连接到我们的服务时 问题被抛出 这是一个日志 我尝试将证书导入 Note
  • 当我过去十年都在使用 VB 进行编码时,如何提高我的 C# 技能?

    我的职业生涯始于在 vax 系统上使用 C C 进行编码 但后来签订了一些全是 VB 的合同 然后成为 VB 专家 然后转到 VB net 现在我渴望为微软工作 似乎他们发布的每一份工作都是用 C C C 编写的 而我几乎看不懂 C 代码
  • 如果存储库包含超过 10 个应用程序/解决方案,如何在 Git 中管理功能和主分支的合并

    我们有超过 7 个 git 存储库 每个存储库包含 10 个点网应用程序 解决方案 它们彼此完全独立 我们遵循功能 gt DEV gt 主分支方法 在这里 我们将Feature分支合并到DEV 它工作正常 当我们合并我们的 DEV 和 ma
  • Rhino Mocks -GenerateStub 和GenerateMock 之间的区别[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 任何犀牛专家都可以通过给出一个适当的例子来解释一下上述方法之间的区别吗 MockRepository类 Rhino Mocks 框架
  • 指定在 SSIS XML 导入期间如何生成主键

    问题是我将数据导入到关系表中 其中数据源是 XML 文件 XSD 架构 XML 源有多个输出 节点之间的关系由 SSIS 在 order id 列中创建 生成的主键值不在 XML 中 在订单详细信息中 我们获得外键 order id 文件被
  • Android 应用程序自动且静默更新?

    我开发了一个应用程序 想要更新自身 并想要以下功能 设备已植根 1 自动检查可以每次启动时更新 我可以做到 2 将apk文件下载到本地 我可以做 3 使用自定义对话框更新 或者静默更新 我不知道 编辑 我的应用程序在带遥控器的电视上运行 默
  • 组合框事件 SelectedValueChanged

    我有一个简单的问题 可能有人在我之前问过它 但我找不到它 假设我有一个数据表 其中包含来自数据库的一些数据 我想将它绑定到一个组合框 我使用这样的标准代码 comboBox1 BeginUpdate comboBox1 ValueMembe
  • XAML,将 Width 和 Height 属性绑定到其他控件的相同属性

    我正在尝试创建反射效果 它工作得很好 只是我必须对一些值进行硬编码 这是我的 XAML
  • 从现有数据库自动生成 JHipster 实体

    作为 JHispster 2 11 0 的一部分 实体配置保存在 jhipster 目录中的特定 json 文件中 这些文件可用于使用以下命令在 JHipster 应用程序中重新生成实体和相关文件 哟 jhipster 实体 ENTITY
  • UNIX fork 之后,指向动态分配内存的指针会发生什么情况?

    有人请澄清 fork 之后指针会发生什么 据我了解 指向堆栈上或静态分配的任何内容的指针都是相对于堆栈 数据段寄存器的 因此在分叉期间准确复制它们是可以的 但是 如果我在 fork 之前 malloc 某些东西会发生什么 例如 void p
  • PHP:同时打开 URL 来模拟 DOS 攻击?

    我已经用各种反 DOS 模块 mod qos mod evasive 等 配置了我的服务器 我现在想做的是运行一个简单的 PHP 脚本 多次调用我网站上的 URL 以达到网站上的各种限制 理想情况下 能够以某种方式同时打开多个 URL 的脚
  • Android 上的原始套接字

    我想创建一个在 Android 上运行并使用原始套接字的应用程序 我发现 java net 或 android net 库中没有任何原始套接字支持 Android 上可以使用原始套接字吗 正确的是 任何 Java 或 Android 库都不
  • 使用 Gnuplot 进行时间序列的线性回归

    我是 Gnuplot 的忠实粉丝 我在学习过程中一直将它用于各种项目 最近我想使用 Gnuplot 来绘制一些时间序列图 例如减肥 锻炼结果 气体消耗等 因此我像这样缩放x轴 set xdata time set timefmt d m Y
  • 使用 lodash 从数组返回对象属性

    我一直试图通过首先过滤对象来返回对象的属性 这就是我所做的 var characters name barney age 36 blocked false name fred age 40 blocked true name pebbles
  • JpaRepository、@Transaction 和repository.saveAndFlush

    我正在第一次尝试服务 存储库方法 但遇到了一个问题 本质上 我想在我的服务中做的是保留我的实体 然后在相同的服务方法中使用它的 ID 最初我打算使用 GenerateValue 和 Sequences 但放弃并决定手动刷新实体并获取 ID
  • 水晶报表日期公式使其成为月底

    我是 CR 新手 需要一个公式来为我提供日期字段上的月底 a 如果日期是 628 2012 或 7 12 2012 则无论字段显示该月的哪一天 我都需要将公式设置为月底 当然 我们知道并非每个月都会在 30 日或 31 日结束 二月有时会在
  • Spring:与常规的finalize()方法相比,使用spring的生命周期回调“destroy-method”有什么优势吗?

    我理解spring的生命周期回调init method当您需要根据 IoC 框架注入的依赖项进行初始化 而常规方法无法完成 时非常有用contructor方法 但是在生命周期回调中进行清理有什么好处destroy method超过常规fin
  • 将本地存储转换为 Chrome 存储以进行获取和设置

    我有一个用户脚本 我已将其转换为 Chrome 扩展程序 供使用 Chrome 的用户使用 用户脚本设置主题并有可供选择的主题 但仅使用 localStorage 除主子域之外的任何内容都将具有默认主题 我希望使用 Chrome 的存储 A
  • React/redux - 将 actionCreators 传递到多个深度级别

    我想知道其他人如何处理将 redux 动作创建者从智能顶级组件传递到许多较低级别的哑组件而不膨胀其 props 定义 例如 以下这个关于 redux 的优秀教程 http teropa info blog 2015 09 10 full s