首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux的设计问题:当您想要执行Redux操作来分派其他Redux操作时,您应该这样做吗?

在Redux中,执行Redux操作来分派其他Redux操作是不推荐的。这样的设计会导致代码的复杂性增加,并且可能引发一些问题,如循环依赖和难以追踪的状态变化。

Redux的设计思想是通过单向数据流来管理应用的状态。当需要更新应用状态时,我们应该通过派发一个action来触发一个reducer函数,从而更新应用的状态。这种方式可以确保状态的可预测性和可维护性。

如果在一个Redux操作中执行另一个Redux操作,可能会导致状态的不一致性和难以追踪的bug。而且,这样的设计也会增加代码的复杂性,使得代码难以理解和维护。

相反,我们应该遵循Redux的设计原则,将业务逻辑尽量放在action creators和reducers中处理。如果需要执行多个Redux操作,可以在action creators中组合多个action,然后通过派发这个组合的action来实现。

总结来说,不推荐在Redux操作中执行其他Redux操作,而是应该将业务逻辑尽量放在action creators和reducers中处理,以保持代码的简洁性和可维护性。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iot
  • 腾讯云移动开发(移动推送、移动分析等):https://cloud.tencent.com/product/mobile
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云虚拟专用网络(VPC):https://cloud.tencent.com/product/vpc
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你必须知道react redux 陷阱

react redux介绍 React ReduxRedux 官方 React UI 绑定层。它允许 React 组件从 Redux 存储中读取数据,并将操作分派到存储以更新状态。...接下来我,详细说一下,他们发生条件: 陈旧props触发条件: 选择器函数依赖于该组件 props 提取数据 作为一个动作结果,父组件会重新渲染并传递新道具 但是这个组件选择器函数在这个组件有机会用这些新道具重新渲染之前执行...不了解基础概念,看一看官方链接: Basic Selector Concepts 其中前两个操作是我们经常使用,最后一个在没有渲染之前重新执行,恐怕只有回调事件(网络访问,异步事件回调等)才会满足。...它根据 props 从 store 中读取一个值,该数据不再存在,如果提取逻辑不小心,这可能会导致抛出错误。 嗯,其实我觉得这是一个使用方式问题,这种bug可以说是设计之初就决定不能这样使用。...想要更改,代价颇大,不如开个会说明白就好了。

2.5K30

设计师都能懂 Redux 指南

让我们深入研究 Redux 可以做什么,它为什么事情,它缺点是什么,以及它与设计有哪些关联? 你听说过 Redux ?它是什么?...以及它与设计有哪些关联? 我目标是帮助像你们这样设计师。即使以前没有写过一行代码,我认为理解 Redux仍然是可能、有益和有趣。...这是一个有点复杂工具,学习曲线相对陡峭,但这是否意味着我们作为设计应该远离它? 不。我认为我们应该拥抱它。汽车设计应该了解引擎用途,对?...它能够为你完成大量繁重工作。。 Redux 可以非常轻松地通过网络发送正在发生事情。 接收另一个用户在另一台机器上执行操作,重放更改并与本地发生操作合并是很简单。...在大多数情况下,这不是什么大问题,而且放缓并不明显。 仍然,存储中存在大量数据并且数据频繁改变(例如,当用户在移动设备上快速键入时),UI 可能因此变得缓慢。

1.6K10
  • 设计角度看 Redux

    你知道 Redux 真正作用远不止状态管理? 你是否想要了解 Redux 工作原理? 让我们深入研究 Redux 可以做什么,它为什么事情,它缺点是什么,以及它与设计有哪些关联?...以及它与设计有哪些关联? 我目标是帮助像你们这样设计师。即使以前没有写过一行代码,我认为理解 Redux仍然是可能、有益和有趣。...我认为我们应该拥抱它。汽车设计应该了解引擎用途,对?为了成功地设计应用程序界面,设计师还应该对底层东西有扎实了解。我们应该了解它可以做什么,理解开发人员为什么使用它,并了解它优势和含义。...它能够为你完成大量繁重工作。。 ? Redux 可以非常轻松地通过网络发送正在发生事情。 接收另一个用户在另一台机器上执行操作,重放更改并与本地发生操作合并是很简单。...在大多数情况下,这不是什么大问题,而且放缓并不明显。 仍然,存储中存在大量数据并且数据频繁改变(例如,当用户在移动设备上快速键入时),UI 可能因此变得缓慢。

    1.7K30

    【领域驱动设计Redux 和领域驱动设计

    本书快速介绍了所有概念,并全面介绍了如何开始 DDD。 Redux Redux 与领域驱动设计有着惊人关联。虽然它不共享相同术语,但想法是存在。...推理很简单:您可以通过重放其事件重建任何聚合状态。 例如,您可以通过重播 PostAdded 事件重建所有帖子。 你熟悉 Redux这个概念?几乎可以肯定,是的。...没问题,重播事件,就可以重建状态。由于错误导致数据损坏?解决错误、重播事件并获得原始状态。你在帮助其他用户?只需重播他们事件即可知道他们状态。 第二个是CQRS。...正是这种精确特性阻止了有害大泥球产生。 让我们看一个例子:我们有一家销售产品并使用营销活动提供报价公司。商店中现有商品最初标有相应产品售价,但活动开始,它会用广告价格重新标记商品。...我们减少了应用程序耦合,我们可以在不更改任何代码情况下从系统中插入和拔出单元。 Redux 同样解耦。每个组合减速器就像一个聚合体。 reducer 收到一个动作,它会独立地减少它。

    1.5K30

    Redux Toolkit

    它最初创建是为了帮助解决关于 Redux 三个常见问题: “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 任何有用事情” “Redux 需要太多样板代码” 我们无法解决所有用例...Redux Toolkit 还包括一个强大数据获取和缓存功能,我们称之为“RTK Query”。它作为一组单独入口点包含在包中。它是可选,但可以消除自己手写数据获取逻辑需要。...这些工具应该对所有 Redux 用户都有益。...无论您是设置第一个项目的全新 Redux 用户,还是想要简化现有应用程序经验丰富用户,Redux Toolkit都可以帮助您改进 Redux 代码。...安装 使用 React 和 Redux 启动新应用程序推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板创建 React App,它利用了Redux Toolkit和 React Redux

    12410

    手摸手教你基于Hooks Redux 实战姿势

    原文:Redux Crash Course with Hooks ?[1] 作者:Chris Achard 译者:博轩 为保证文章可读性,本文采用意译 ? 你对 Redux 感到困惑?...使用 react-redux Provider 为你应用提供 store。 使用 Provider 包装你应用入口,以便应用程序中任何组件都可以访问 store 中数据 ? 4....5. action 是普通 JavaScript 对象 所有 action 均应具有 “type” 键 它们可能还具有其他键(参数) ? 6....重要是,reducer 返回一个新状态对象(而不是修改旧对象属性),这样对象中属性发生某些改变,组件将重新渲染。...要分派 action ,请使用 react-redux自定义 hook: useDispatch 用一个 action 对象调用 useDispatch, 将传入 reducers 函数并运行,

    1.5K20

    RxJS & React-Observables 硬核入门指南

    执行.addeventlistener,你正在将一个观察者推入subject观察者集合中。无论何时事件发生,subject都会通知所有观察者。...Observable Observable被订阅,我们传递给新Observable构造函数subscribe函数就会被执行。...一个观察者订阅了一个可观察对象,它会得到一个有自己执行路径可观察对象副本,使可观察对象成为单播。 这就像在看YouTube视频。所有的观众观看相同视频内容,但他们可以观看视频不同部分。...所有这些都让Redux看起来有点过头了。但是这里有一些实际用例可以改变想法。...但我不讨厌redux- tank,我喜欢它,我每天都在使用它! 练习1:调用API 用例:调用API获取文章注释。API调用正在进行时显示加载器,并处理API错误。

    6.9K50

    2023 React 生态系统,以及我一些吐槽……

    Redux 文档教授了一些常见模式,用于在请求生命周期中分派操作以跟踪加载状态和请求结果,并且 Redux Toolkit createAsyncThunk API 是设计为抽象化该典型模式。...虽然可以使用像 Redux 这样状态管理库缓存数据,但这些用例足够不同,值得使用专为数据获取用例而构建工具。...RTK Query 从先驱解决数据获取问题其他工具(如 Apollo Client、React Query、Urql 和 SWR)中获得灵感,但在其 API 设计中增加了独特方法: 数据获取和缓存逻辑是构建在...核心 @apollo/client 库提供了与 React 内置集成,而更大 Apollo 社区则维护了与其他流行视图层集成。 应该是用 GraphQL 状态管理最佳选择。...对于小型应用程序来说这没问题,但如果使用 Redux-Form,随着 Redux 应用程序增长,输入延迟将继续增加。

    72530

    React 入门学习(十四)-- redux 基本使用

    简单理解就是复杂 从组件角度去考虑的话,当我们有以下应用场景,我们可以尝试采用 Redux 实现 某个组件状态需要共享 一个组件需要改变其他组件状态 一个组件需要改变全局状态 除此之外...Redux 三个核心概念 1. store store 是 Redux 核心,可以理解为是 Redux 数据中台,我们可以将任何我们想要存放数据放在 store 中,在我们需要使用这些数据,我们可以从中取出相应数据...但是如果仅仅这样,很显然是会报错,它默认需要接收一个对象 如果我们需要实现传入函数,那我们就需要告诉:你只需要默默帮我执行以下这个函数就好!...—> reducer —> store 第二个原则 state 只读:在 Redux 中不能通过直接改变 state ,控制状态改变,如果想要改变 state ,则需要触发一次 action。...参考资料 Redux + React-router 入门和配置‍教程 小册:React 进阶实践指南 ---- 非常感谢阅读,欢迎提出你意见,有什么问题欢迎指出,谢谢!

    47520

    「前端架构」Grab前端学习指南

    最后,视图和逻辑在组件中是自包含,不应该受到影响,也不应该影响其他组件。这使得在大规模重构过程中很容易对组件进行移位,只要向组件提供相同支持即可。...编写好CSS是困难。在能够编写可维护和可伸缩CSS之前,需要多年经验和挫败感解决问题。具有全局名称空间CSS基本上是为web文档设计,而不是真正为偏爱组件体系结构web应用程序设计。...linter是一个静态分析代码并发现代码问题工具,它可以潜在地防止bug /运行时错误,同时强制执行一种编码风格。在拉请求审查期间,审查人员不必对编码风格留下挑剔评论,可以节省时间。...您有多个项目,这些包在每个项目中都是重复,它们在很大程度上是相似的。每次在新项目中运行npm安装,这些包都会被一次又一次地下载,即使它们已经存在于计算机中其他项目中。...npm@5.0.0于2017年5月发布,它似乎解决了纱线想要解决许多问题。一定要注意! 预计持续时间:2小

    7.4K20

    2022社招react面试题 附答案

    React异步请求到底应该放在哪个⽣命周期⾥,有⼈认为在componentWillMount中可以提前进⾏异步请求,避免⽩屏,其实这个观点是有问题。...由于JavaScript中异步事件性质,启动API调⽤,浏览器会在此期间返回执⾏其他⼯作。React渲染⼀个组件,它不会等待componentWillMount它完成任何事情。...总结: componentWillMount:在渲染之前执行,用于根组件中 App 级配置; componentDidMount:在第一次渲染之后执行,可以在这里AJAX请求,DOM操作或状态更新以及设置事件监听器...这样主要原因是受控组件支持即时字段验证,允许有条件地禁用/启用按钮,强制输入格式。 7、如何避免组件重新渲染? React中最常见问题之一是组件不必要地重新渲染。...redux-observable优点: 功能最强:由于背靠rxjs这个强⼤响应式编程库,借助rxjs操作符,你可以⼏乎任何你能想到异步处理; 背靠rxjs:由于有rxjs加持,如果你已经学习了

    2.1K10

    浅谈前端状态管理(下)

    改变(既你借书只能提交借书单借),不应该直接修改 State 里值。...(既通过提交借书单给管理员才会有接下来一系列其他操作) Action 是一个自定义对象,其中type属性是约定好将要执行操作。...尽管在 Redux 里还是没办法做到一切都是确定(如异步)但是应该保证大多数部分都是确定包括: 视图渲染是可确定 状态重建是可确定 至于为什么要这么,上一篇我已有提及。...(当然你想用 Redux 也没问题,咱们只是探索更多方式) 还是用图书馆举例子,现在有一个图书馆管理系统,你从列表页(list)跳入详情页(detail)需要保存列表页状态(如搜索栏状态等)。...若使 HOC(高阶组件)继承自原组件,就不会生产两个生命周期交替执行,很好解决这个问题

    89420

    React进阶(1)-理解Redux

    ,很痛苦,那么就可以考虑使用Redux,只要你hold住,没有所谓高大上技术,只有适合自己业务技术 盲目引入Redux只会增加项目的复杂度,引入新技术应该是循序渐进  不使用Redux...,凡是共用了Store里面的数据组件都会重新取数据 这样,红色圆圈组件数据就非常容易传递给其他组件了,无论是它父级组件还是兄弟,非兄弟组件 Redux就是把组件数据放到一个公共区域...(仓库)中进行存储,改变Store存储区域里面的数据,其他组件如果用到了公共区域数据,那么就会感知到数据变化,它会自动更新取Store中最新数据 这样话,无论你应用组件嵌套得有多么复杂,...多么深,走流程都是一样,组件之间并不会干扰,低耦合效果 组件一修改,把修改数据放到Store当中,而其他组件又从Store当中再来取,这样的话,组件与组件之间并不是直接进行通信,是通过这么一个...,返回给页面上组件,实现页面组件更新 大家可以先仔细体会上面这段文字含义,在后续实例代码中,在回过头对比着代码与文字进行理解,后续还会在拿出来  Redux设计基本原则 在Redux中有以下几个设计基本原则

    1.4K22

    2021年50个酷炫Web和移动项目创意

    2021年50个酷炫Web和移动项目创意 想到项目创意,很多人都在挣扎。这里列出了50个您可以在2021年完成很棒项目构想。我将以下列技术栈为例,以便弄清楚自己也可以做到这一点。...这样,您就可以在一个平台上拥有一个统一界面读取所有内容。...即使当前拥有或出售了它,也不管它是数字版本还是实物副本。如果您可以将这样应用程序扩展到更多社交网络中,以便您可以关注其他游戏列表,然后他们也可以这样,则可以进一步扩展。可能性是无止境。...像体重,身高等… 编程级别:中级 项目类型:全栈 前端:HTML,CSS,JavaScript,React,Redux,React本机 后端:Node.Js,NoSQL 36.居室装饰应用 曾经努力想出一个想要房间看起来如何想法...例如,假设您有一个选择选项,而需要选择正确选项。应该能够跟踪得分,并且得分应该始终是随机这样就不会有一场比赛是一样

    4.1K21

    前端高频react面试题

    担任,store只存储,中间人,Reducers更新完成以后会通过store订阅通知react component,组件把新状态重新获取渲染,组件中也能主动发送action,创建action...一些库如 React 视图在视图层禁止异步和直接操作 DOM解决这个问题。美中不足是,React 依旧把处理 state 中数据问题留给了你。Redux就是为了帮你解决这个问题。...一般认为,异步设计是为了性能优化、减少渲染次数:setState设计为异步,可以显著提升性能。...这个问题设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面的数据存储在redux中,在重新加载页面,获取Redux数据;data.js: 使用webpack构建项目,可以建一个文件...,该action函数体会自动执行 store.dispatch(action)}(2)使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js

    3.4K20

    高频React面试题及详解

    由于JavaScript中异步事件性质,启动API调用时,浏览器会在此期间返回执行其他工作。...而且在componentWillMount请求会有一系列潜在问题,首先,在服务器渲染,如果在 componentWillMount 里获取数据,fetch data会执行两次,一次在服务端一次在客户端...解决这个问题 Ref 传递问题: Ref 被隔断,后来React.forwardRef 解决这个问题 Wrapper Hell: HOC可能出现多层包裹组件情况,多层抽象同样增加了复杂度和理解成本...React 16之前 ,reconcilation 算法实际上是递归,想要中断递归是很困难,React 16 开始使用了循环代替之前递归....,但是我们依然需要引入这些代码 ts支持不友好: yield无法返回TS类型 redux-observable优点: 功能最强: 由于背靠rxjs这个强大响应式编程库,借助rxjs操作符,你可以几乎任何你能想到异步处理

    2.4K40

    React进阶(1)-理解Redux

    ,由于组件都是以树结构组织起来,每个组件被渲染,它都会递归地渲染下级组件 ?...,是放到reducer里面去管理,Store从Reducer中拿到返回数据state,最后供外部组件取用 当红色圆圈组件想要改变数据传递给其他组件,只需要去改变Store里面的存储红色圆圈组件数据就可以了...这样,红色圆圈组件数据就非常容易传递给其他组件了,无论是它父级组件还是兄弟,非兄弟组件 Redux就是把组件数据放到一个公共区域(仓库)中进行存储,改变Store存储区域里面的数据,...组件一修改,把修改数据放到Store当中,而其他组件又从Store当中再来取,这样的话,组件与组件之间并不是直接进行通信,是通过这么一个store中间角色实现数据传递共享....在Redux中有以下几个设计基本原则 单向数据流 唯一数据源 保持状态只读 数据改变只能通过纯函数reducer完成 单向数据流: 这个其实与props不能直接被修改一样,在父组件向子组件传递数据是通过属性方式进行传递

    1.2K20

    React全家桶之Redux使用

    也正因为一切皆有可能,一个问题即使没有无数种解法,也会有很多很多种解法。 但是,拥有很多方案并不表示我们应该使用所有的方案。 软件要由程序员维护和开发,研发部门管理也是程序员。...React和Redux技术框架最大好处,并不是让我们无所不能,而是设定了一规矩,让每个模块只最单一事情。让开发者只能按照这套规矩完成代码。...这样,只要理解了这套规矩,无论产生代码由谁来维护由谁来继续开发都不会有大问题redux其实借鉴与flux思想,它是单向数据流最佳实践(也许吧)。...重构 当前代码很不友好,应该重构一下。 重点思考,connect两个参数是什么含义? 在组件中dispatch操作(add,init)会造成很大耦合。如果能结构到组件参数中,就好了。...但经过中间件(强化器)处理后,可以异步操作,或者打日志 安装redux-thunk和redux-logger: npm i redux-thunk redux-logger-S 应用中间件,store.js

    1.3K20

    Redux

    这样确保了视图和网络请求都不能直接修改state,相反它们只能表达想要修改意图。 使用纯函数来执行修改 ​ 为了描述action如何改变state tree,需要编写reducers。...action内必须有一个字符串类型type字段表示将要执行动作。多数情况下type会被定义成字符串常量。当应用规模变大,可以使用单独模块或文件存放action。 ​...(previousState, action) => newState ​ 保持reducer纯净非常重要,所以永远不要在reducer中这些事: 修改传入参数; 执行有副作用操作; 调用非纯函数...Redux应用只有一个单一store。需要拆分数据逻辑应该使用reducer组合而不是创建多个store。 数据流 ​ 严格单向数据流是Redux结构核心设计。 ​...这意味着应用中所有的数据都遵循相同声明周期,这样可以让应用变得更加可预测且同意理解。同时也鼓励数据规范化,这样可以避免使用多个独立且无法相互引用重复数据。 ​

    1.8K20
    领券