文档建议反馈控制台
首页
学习
活动
专区
工具
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
相关搜索:windows js调用蓝牙js prompt是什么意思js控制select不可编辑js map是否包含某keyjs .map 文件有什么用js怎么调用两个ajax请求d3.js ER视图demojs中json转list对象eclipse 忽略js验证vue 中使用mock.js
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

你必须知道的react redux 陷阱

react redux介绍 React Redux 是 Redux 的官方 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.4K30

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

10810

手摸手教你基于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.8K50

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 应用程序的增长，输入延迟将继续增加。

59630

React 入门学习（十四）-- redux 基本使用

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

46920

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

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

7.4K20

浅谈前端的状态管理（下）

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

87120

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

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

3.9K20

前端高频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.3K20

2022社招react面试题 附答案

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

2.1K10

React进阶(1)-理解Redux

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

1.4K22

React进阶(1)-理解Redux

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

1.1K20

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

「前端架构」Redux vs.MobX的权威指南

大型应用程序的前端管理是最难解决的问题之一。虽然有几种方法可以解决状态管理问题，但Redux和MobX是两个最流行的外部库，用于解决前端应用程序中的状态管理问题。...学习Redux还意味着您需要了解像Thunk和Saga这样的Redux中间件，这会增加更多的学习内容。 Mobx 众所周知，与Redux相比，MobX更容易掌握。...在Redux中，虽然有一个巨大的JSON对象来表示存储，但是您可以始终将代码拆分为多个reducer。这样，就可以用多个reducer在逻辑上分离关注点。...数据结构 Redux Redux使用普通JavaScript对象作为数据结构来存储状态。使用Redux时，必须手动跟踪更新。在需要维护大量状态的应用程序中，这可能更困难。...样板代码 Redux 关于Redux最大的抱怨之一是它附带的大量样板代码。当您将React与Redux集成时，会产生更多的样板代码。这是因为Redux本质上是显式的，很多功能都必须显式地编码。

1.5K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券