如何为高度解耦、即插即用的复杂组件构建 Redux?

     2023-02-22     74

关键词:

【中文标题】如何为高度解耦、即插即用的复杂组件构建 Redux?【英文标题】:How to structure Redux for a highly de-coupled, plug-n-play complex component? 【发布时间】:2018-04-10 12:49:16 【问题描述】:

我对 Redux 很陌生,想在我的应用程序中使用它,但我在 Redux 部分的架构/设计阶段陷入困境。以下是我对设计的要求和假设。

申请详情: 带有 AngularJS 的 SPA。使用的其他库 ng-reduxreselectrxjs

组件详情: 可重复使用的网格组件来渲染大量数据。

我的想法: 创建一种即插即用的基于组件的架构,其中网格的所有内部组件都独立于父/组合组件,例如搜索、排序、行、标题、单元格。

    所有组件都将拥有自己的一组 reducer、action、selector 和 store 中的 state slice。

    因为所有组件都有自己的reducer,并且可以按需插入,所以我需要他们懒惰地注册到store,而不是在一个地方堆积。

    某些组件,如搜索、排序,有自己的状态,也会影响其他组件的状态。例如:设置查询参数(searchText、sortOrder 等)以获取将由其他组件处理的网格数据。

我的想法:

    对于第一点,我正在研究 reselect 以提供相关的状态切片。

    对于第二点,我仍然对使用 combineReducers/replaceReducer 进行延迟注册感到困惑。如果我想访问该州的多个部分,我觉得 combineReducers 不适合。

    对于第三点,我正在考虑以下方法:

    一个。通过 getState() 传递整个状态以更新状态的多个部分。虽然这种方法让我感觉 Redux 使用不当。

    b.组件 A 触发它自己的动作来更新它们的状态部分,然后另一个动作被触发给另一个组件 B 来更新它的状态片段。这种方法也感觉打破了 Redux 的整体理念,side-effect 的概念可以在这里使用,虽然我不知道如何使用它,也许 redux-saga em>、redux-thunk

注意:使用任何一种方法都不应该导致组件知道其他组件,因此任何必须做的事情都将通过传递像 actionsToFire: ['UPDATE_B'] 这样的通用配置对象来完成。

    我需要在应用程序页面之间来回导航时进行状态管理,但我不需要从服务器端热重载、动作重放或预取应用程序状态。

    组件也将负责在不再需要时销毁其状态。并且状态将具有规范化的结构。

我知道这些要求可能看起来很奇怪或不常见,但我会保持这种状态。

我已经知道的几件事是:

    我不需要像 Dan 的经典文章所说的那样使用 Redux,但我认为在这种情况下我需要它。

    我知道 Smart 和 Dumb 组件,大部分我的组件可能看起来很聪明(即知道应用程序状态),但这就是我想要保留它们的方式,我可能错了。

网格组件示意图:

Grid Component Diagram

【问题讨论】:

如果您有同一个组件类的多个实例,您需要一种在全局状态下识别它们的方法(例如使用 id)。我不知道你是否在设计中考虑到了这一点 @bitstrider 是的,我已经考虑过了,我将在需要的地方使用命名空间或 ID。 【参考方案1】:

Redux 的全局存储使封装和动态即插即用行为变得更加困难,但这是可能的。实际上有many existing libraries for per-component-instance state 和dynamic registration of reducers。 (也就是说,到目前为止我看到的用于组件管理的库都是 React 库——你必须研究其中的一些并自己重新实现一些东西才能与 Angular 一起使用。)

【讨论】:

第一个不支持即插即用的nt式helloworld驱动

1.安装好驱动包2.编写源代码Sources文件和makefile文件##源代码/*********************************文件名称:Driver.h*作者:左飞*完成日期:2016-9-4*********************************/#pragmaonce//保证头文件只被编译一次#ifdef__cplusplusextern"C"//兼容C代码{ 查看详情

分享一个即插即用的私藏缓动动画js小算法

二、即插即用的缓动小算法原理如下:假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样;如果是缓动,每次移动距离不一样。那如何才能不一样呢?很简单,按比例移动就可以。例如:每次移动剩余距离的... 查看详情

如何让即插即用的 WPF 应用程序创建 SQL 数据库? [关闭]

】如何让即插即用的WPF应用程序创建SQL数据库?[关闭]【英文标题】:HowtomakeaplugandplayWPFappcreateaSQLdatabase?[closed]【发布时间】:2020-11-2212:22:15【问题描述】:我目前正在学习WPF,目的是为朋友制作一个简单的应用程序。此应用程... 查看详情

linuxtogo:制作随身携带、即插即用的linux系统

...USB驱动器中启动并运行?下面我将教大家制作随身携带、即插即用的Linux操作系统。(把当前系统移植到移动硬盘上)为什么需要这个功能呢?硬件:软件:Linux发行版自带的工具如gpartedgrubcp制作Linux启动盘的制作分为以下几个... 查看详情

yolov7yolov5改进多种检测解耦头系列|即插即用:首发最新更新超多种高精度&轻量化解耦检测头(最新检测头改进集合),内含多种检测头/解耦头改进,高效涨点

查看详情

深度学习中的即插即用模块pdf下载

《卷积神经网络中的即插即用模块》是首发于GiantPandaCV公众号的电子书教程,欢迎关注其微信公众号:链接:https://pan.baidu.com/s/1Tzrcs-6XmObawb19Q68iOw提取码:os3g部分目录:  查看详情

cbam——即插即用的注意力模块(附代码)(代码片段)

论文:CBAM:ConvolutionalBlockAttentionModule代码: code目录前言1.什么是CBAM?(1)Channelattentionmodule(CAM)(2)Spatialattentionmodule(SAM)(3)CAM和SAM组合形式2.消融实验(1)Channela... 查看详情

macos读写ntfs即插即用.

1.安装osxfusehttps://osxfuse.github.io/2.安装brewhttps://brew.sh/index_zh-cn.html3.安装ntfs-3gbrewinstallntfs-3g4.替换本地的mount_ntfs文件sudomv/sbin/mount_ntfs/sbin/mount_ntfs.oldsudoln-s/usr/local/sbin/mount_ntf 查看详情

常用的即插即用的注意力机制模块(secbam)(代码片段)

1、SENet1.1前言        SENet是最后一届ImageNet2017竞赛分类任务的冠军。SENet网络的创新点在于关注channel之间的关系,希望模型可以自动学习到不同channel特征的重要程度。为此,SENet提出了Squeeze-and-Excitation(SE)模块。   ... 查看详情

如何为具有 redux 连接组件作为孙子的组件编写故事书故事?

】如何为具有redux连接组件作为孙子的组件编写故事书故事?【英文标题】:HowdoIwriteastorybookstoryforacomponentthathasredux-connectedcomponentasgrandchild?【发布时间】:2020-02-2521:21:48【问题描述】:我们正在利用现有代码库构建StorybookUI库。... 查看详情

如何在没有 Windows 窗体的情况下接收即插即用设备通知

】如何在没有Windows窗体的情况下接收即插即用设备通知【英文标题】:HowtoreceivePlug&Playdevicenotificationswithoutawindowsform【发布时间】:2011-01-0421:26:00【问题描述】:我正在尝试编写一个可以捕获Windows消息的类库,以便在设备已... 查看详情

将即插即用设备映射到 PCI 插槽 ID,C#

】将即插即用设备映射到PCI插槽ID,C#【英文标题】:MappingPlugNPlayDevicestoPCISlotIDs,C#【发布时间】:2017-06-0918:18:42【问题描述】:我有一定数量的外部设备,我们称它们为事物。每个事物都通过插入PCI插槽的PnP卡与计算机连接。每... 查看详情

智能家居通用管理平台-即插即用机制的设计

   即插即用机制,对智能家居的推广,非常重要。没有她,老百姓估计不会使用。   好了,现在有了“智能冰箱”和它的驱动程序,SHM就可以使用它的SHDD来与冰箱交互了,并且是使用TCPIP协议通信。但... 查看详情

即插即用开源在线客服系统——ppmessage

PPMessage是一个开源的在线客服平台。PPMessage能够帮助你在第一时间与你的客户建立联系,开发人员可以非常容易的将PPMessage集成到你的网站或者iOS、Android的应用中。PPMessage的前端后端都是开源的,后端全部基于Python,简洁高效... 查看详情

cvpr‘2023即插即用系列!|biformer:通过双向路由注意力构建高效金字塔网络架构(代码片段)

Title:BiFormer:VisionTransformerwithBi-LevelRoutingAttentionPaper:https://arxiv.org/pdf/2303.08810.pdfCode:https://github.com/rayleizhu/BiFormer导读众所周知,Transformer相比于CNNs的一大核心优势便是借助自注意力机制的优势捕捉长距离上下文依赖。正所谓物... 查看详情

即插即用安全验证模块-使用pam模块(代码片段)

可插入式验证模块(PAM)。可插入式验证木块。应用程序调用libpam函数来验证和授权用户。libpam基于应用程序的PAM配置文件做检测。可以通过libc在NSS中检查。共享的,动态可配置代码。文档:/usr/share/doc/pam-<version>/#man-kpam_... 查看详情

type-c领夹式麦克风方案,即插即用,外围简单兼容性优秀

TYPE-C领夹式麦克风方案,即插即用,外围简单兼容性优秀的芯片-LDR6028结构示意图单接手机(由手机往外输出电压给板子工作)1、概述LDR6028SOP8是乐得瑞科技针对USBType-C标准中的Bridge设备而开发的USB-CDRP接口USBPD通... 查看详情

springmvc文件上传

...ngMVC文件上传简介   在SpringMVC中,文件上传功能可以由即插即用的CommonsMultipartResolver解析器组件实现,它定义在org.springframework.web.multipart包里。   Spring提供的CommonsMultipartResolver解析器可以支持CommonsFileUpload和COSFileUpload两种... 查看详情