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

当我调用一次reducer时,它会被触发两次。当我试图修复它时,会有一些奇怪的事情

发生,比如数据更新不及时或者状态不一致。为了解决这个问题,首先我们需要了解reducer的作用和工作原理。

Reducer是Redux中的一个核心概念,它用于定义应用程序状态的变化。当我们触发一个action时,reducer会根据action的类型来决定如何更新状态。Reducer接收旧的状态和action作为输入,然后返回一个新的状态。由于reducer是纯函数,因此它的输出只取决于输入,不会有任何副作用。

现在回到问题中的现象,当调用一次reducer时它会被触发两次。这通常是因为在应用程序中,存在多个地方同时dispatch了相同的action,导致reducer被多次调用。为了解决这个问题,我们可以通过以下几个步骤来修复:

  1. 检查代码中是否有多次dispatch相同action的地方,尤其是在组件的生命周期函数中,比如componentDidMount等。确保只在必要的地方dispatch相应的action。
  2. 检查是否有多个reducer订阅了相同的action,这可能会导致reducer被多次调用。确保每个action只有一个对应的reducer来处理。
  3. 使用Redux DevTools等工具来调试和跟踪action的分发和reducer的调用。这可以帮助我们更好地定位问题所在。

修复问题后,可能会出现一些奇怪的事情,比如数据更新不及时或状态不一致。这可能是因为在修改reducer时引入了一些bug,或者在应用程序的其他地方出现了问题。为了解决这些奇怪的问题,我们可以采取以下步骤:

  1. 仔细检查修改reducer的代码,确保逻辑正确并没有引入新的bug。可以使用单元测试来验证reducer的行为。
  2. 检查应用程序的其他部分,比如组件、中间件、异步操作等,看是否有地方对状态进行了直接修改或者与状态相关的bug。
  3. 使用调试工具来跟踪数据流和状态变化,例如React DevTools、Redux DevTools等。这些工具可以帮助我们更好地理解应用程序的状态变化和数据流动,从而更好地定位问题所在。

总之,当调用一次reducer时触发两次,需要检查代码中是否存在多次dispatch相同action的地方,以及是否有多个reducer订阅了相同的action。修复问题后,可能会出现一些奇怪的事情,需要仔细检查修改的代码,并检查应用程序的其他部分以解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从应用到源码-深入浅出Redux

当我们派发任意一个 action ,即使当前派发 action 已经匹配到了对应 reducer 并且执行完毕后。...这也就意味着如果不同 reducer 中存在相同 action.type 匹配那么派发 action 所以匹配到类型 reducer会被计算。 也许,你不是很明白上边那段话。...简单来说,可以总结为通过 combineReducers 合并多个 reducer 后,触发任意 action 无论如何所有 reducer 函数都会被执行。...此处 compose 函数就是在做函数组合事情,之后我们会详细解读。...当我调用 store.dispatch 函数,又会经历以下步骤: 当我调用 store.dispatch(action) ,首先拿到返回 args 函数,相当于调用 args(action)

1.3K10

一篇文章助力大家理解Python 代码中垃圾回收机制

但是,获取标签下面的标签,获取仍然是同一个标签。 这样一来,在上图代码里面第15-20行就会重复执行两次。...于是,我想看看每次提取时候,对应 element 是哪个,但却发生了更诡异事情,我们做一个看起来对代码不会有任何影响改动: ?...但奇怪事情就这样发生了,问题消失了!在图4大量打印同一个标签,缓存数据跟提取数据不一致!,在图5里面却一条都没有打印。这样修改以后,GNE 提取结果就正确了。 但为什么会发生这种事情呢?...似乎知道我在试图去观察当我尝试用代码去观察 element,它就一切正常。当我不观察,它就会出问题。薛定谔 element。 看不见手 遇事不决,量子力学。...而当我使用element_text_cache[element_flag] = [element_text_list, element],由于每个element对象不会被回收,于是就不会出现不同节点互相覆盖问题

49720
  • 谁动了我Token | TW洞见

    这里涉及到系统是一个7年遗留系统(技术栈是.NET MVC2),即将被客户淘汰。这篇博文主题无关技术本身,文中谈到技术细节也不是什么高大上,更多是想记录因这件事情触发非技术思考。...夏夏改了代码并编译运行,奇怪事情发生了:Form提交成功,并且错误被修复了!!不光开了个好头,好像我们还中彩蛋了感觉。 我和夏夏都惊呆了:“这怎么可能?” 夏夏说。...心中不解疑惑使得我们三个又重新加入了新一轮分析中:“等等,好像这里执行了两次,第一次失败,而第二次就成功了”,强哥敏锐扑捉到了又一丝新线索,事情好像有了新转机。 Form提交了两次?...夏夏和强哥互相看了一眼,哈哈大笑:“因为干掉了一次。” 问题罪魁祸首就这样找到了,我们通过Git提交历史也知晓了这个问题是在n年前解决“按钮多次点击问题”引入。...死磕就如这次事件中强哥,一次次从问题中找到线索找到根源。 试想一下如果没有强哥加入,真相可能就会被淹没。他们所展现是与常人所不同专业精神和匠人精神,而这种精神是为客户创造价值根本!

    83090

    React总结概括

    当我们使用组件,其实是对Main类实例化——new Main,只不过react对这个过程进行了封装,让看起来更像是一个标签。...在更新也会触发5个钩子函数: 6、componentWillReceivePorps(nextProps) 组件初始化时不调用,组件接受新props时调用。...2、subscribe: 监听state变化——这个函数在store调用dispatch时会注册一个listener监听state变化,当我们需要知道state是否变化时可以调用返回一个函数,调用这个返回函数可以注销监听...action触发reducer改变了state,需要再拿到新state里数据,毕竟数据才是我们想要。...如果不相同则调用this.setState()触发Connect组件更新,传入ui组件,触发ui组件更新,此时ui组件获得新props,react –> redux –> react 一次流程结束

    1.2K20

    【React】883- React hooks 之 useEffect 学习指南

    这能够避免一些bugs,但在一些场景中又会有些讨人嫌。对于这些场景,你可以明确地使用可变ref保存一些值(上面文章末尾解释了这一点)。...值得强调是 — 我们组件函数每次渲染都会被调用,但是每一次调用中count值都是常量,并且它被赋予了当前渲染中状态值。...如果你心智模型是“只有当我想重新触发effect时候才需要去设置依赖”,这个例子可能会让你产生存在危机。你想要触发一次因为它是定时器 — 但为什么会有问题?...在之前渲染中调用reducer怎么“知道”新props?答案是当你dispatch时候,React只是记住了action - 它会在下一次渲染中再次调用reducer。...**当我们需要将函数传递下去并且函数会在子组件effect中被调用时候,useCallback 是很好技巧且非常有用。或者你想试图减少对子组件记忆负担,也不妨一试。

    6.5K30

    React Hooks踩坑分享

    我们组件第一次渲染时候,从useState()拿到num初始值为0,当我调用setNum(1),React会再次渲染组件,这一次num是1。...这一次弹出数据是5。 为什么同样例子在类组件会有这样表现呢?...只有当依赖数组中依赖发生变化,会被重新创建,得到最新props、state。所以在用这类API我们要特别注意,在依赖数组内一定要填入依赖props、state等值。...每次调用fetchData函数会更新list,list更新后fetchData函数就会被更新。fetchData更新后useEffect会被调用,useEffect中又调用了fetchData函数。...我们fetchData函数不再关心怎么更新状态,只负责告诉我们发生了什么。更新逻辑全都交由reducer去统一处理。

    2.9K30

    翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道JS》姊妹篇

    这通常会有多学很多东西,但是我觉得用这种方式你会更深入理解。...当我们处理一个值比较少数组一切都还好。但是如果数组中有很多值,每个 filter(..) 分别处理数组每个值会比我们预期慢一点。...在这种情况下,一次事件只有一个值,因此使用两个单独 filter(..) 函数处理这些值并不是什么大不了事情。 但是,不太明显是每个 filter(..)...另一个缺点是可读性,特别是当我们需要对多个数组(或 observable)重复相同操作。...把 Map/Filter 表示为 Reduce 我们要做第一件事情就是将我们 filter(..) 和 map(..)调用变为 reduce(..) 调用

    68480

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

    简单理解就是复杂 从组件角度去考虑的话,当我们有以下应用场景,我们可以尝试采用 Redux 来实现 某个组件状态需要共享 一个组件需要改变其他组件状态 一个组件需要改变全局状态 除此之外...= data => ({ type: INCREMENT, data }) 我们调用,会返回一个 action 对象 3. reducerReducer 中,我们需要指定状态操作类型...,我们会调用这个函数,在这个函数里接收一个延时加时间,还有action所需数据,和原先区别只在于返回一个定时器函数 但是如果仅仅这样,很显然是会报错默认需要接收一个对象 如果我们需要实现传入函数...—> reducer —> store 第二个原则 state 只读:在 Redux 中不能通过直接改变 state ,来控制状态改变,如果想要改变 state ,则需要触发一次 action。...通过 action 执行 reducer 第三个原则 纯函数执行:每一个reducer 都是一个纯函数,不会有任何副作用,返回是一个新 state,state 改变会触发 store 中 subscribe

    57520

    2月幽默集合(上)

    虽然有大量警告,但代码依然有效 程序员眼中:产品经理提出需求样子 当我开始学习一个新语言时候 当你为高并发扩容… 当我接手了一个新项目, 前期准备真的非常漂亮 阅读完文档开始使用新框架 当我们开始在生产中调试...程序员编程水平:1级到100级 时隔半个月要我添加注释 虽然我们交付了V2版本, 但用户仍然使用V1版本 大部分网站是这样子做优化 程序员最炫酷键盘,码农专属定制 当我一次尝试重构代码时候...运维连续按下两次, 执行了 rm 命令 当我听说实习生动了我代码后 当老板给我加薪,我样子 从删库到跑路 做梦都在敲代码你 卧槽,100个Bug 刚开发完项目,真正上线时候… 获得Root权限程序员是这样消灭...Bug 当我改变一行代码 实习生代码总是让我感到震惊 当我拿到了Root权限后 当我向客户展示如何使用该应用程序时 单向循环链表 当我试图修复一个Bug 当老板想要找你来修复这个bug时样子 星期五下午项目经理分配任务样子...超形象比喻: 初始规格及其实际隐藏内容 程序员折叠T恤方法,真聪明 开始重构遗留代码前, 程序员必会做事情 程序员:明明在我电脑上是运行正常啊, 为何在你那就....

    57920

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

    简单理解就是复杂 从组件角度去考虑的话,当我们有以下应用场景,我们可以尝试采用 Redux 来实现 某个组件状态需要共享 一个组件需要改变其他组件状态 一个组件需要改变全局状态 除此之外...= data => ({ type: INCREMENT, data }) 我们调用,会返回一个 action 对象 3. reducerReducer 中,我们需要指定状态操作类型...,我们会调用这个函数,在这个函数里接收一个延时加时间,还有action所需数据,和原先区别只在于返回一个定时器函数 但是如果仅仅这样,很显然是会报错默认需要接收一个对象 如果我们需要实现传入函数...—> reducer —> store 第二个原则 state 只读:在 Redux 中不能通过直接改变 state ,来控制状态改变,如果想要改变 state ,则需要触发一次 action。...通过 action 执行 reducer 第三个原则 纯函数执行:每一个reducer 都是一个纯函数,不会有任何副作用,返回是一个新 state,state 改变会触发 store 中 subscribe

    47520

    干货 | 我从资深软件工程师学到避坑大法

    因为不管这个函数有多大,你都不会觉得奇怪,毕竟这个函数应该做所有的事情。这时候就需要改名、重构了。 有意义命名也有不太好一面。如果名字表意太强,结果掩盖了一些功能上细微差别怎么办?...以下是我在 Google 卫生间小休学到例子: 我在 #2 中遗漏了一些东西,那里是 bug 出现地方; 所以每当发现 bug ,确保修复 bug 代码也有相应测试(称为回归测试),用于记录信息...程序出错时候 当事情出错,而且一定会有出问题时候,黄金法则是将对客户影响最小化。 当事情出了差错,我自然倾向于赶快解决 bug。事实证明,这并不是最理想解决方案。...我认为只要请求-相应日志就足够了,但是他会有更多记录内容,比如查询执行时间、代码进行一些特定内部调用,以及何时转储日志。一切都已经解决了。...当你修复 bug ,你不仅仅关注如何修复 bug,而是你为什么不早点发现呢?是否有布置警报?如何能够更好地监控来避免类似的问题? 我还不知道如何监控 UI。

    57120

    2022社招react面试题 附答案

    由于JavaScript中异步事件性质,当您启动API调⽤,浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件,它不会等待componentWillMount完成任何事情。...⾸先,在服务器渲染,如果在componentWillMount⾥获取数据,fetch data会执⾏两次,⼀次在服务端⼀次在客户端,这造成了多余请求。...所有的jsx最终都会被转换成React.createElement函数调用。...; componentWillReceiveProps:在初始化render时候不会执行,它会在组件接受到新状态(Props)触发,一般用于父组件状态更新子组件重新渲染 shouldComponentUpdate...这种State计算过程就叫做ReducerReducer是⼀个函数,接受Action和当前State作为参数,返回⼀个新State; dispatch:是View发出Action唯⼀⽅法。

    2.1K10

    宝啊~来聊聊 9 种 React Hook

    其实当 DemoState 函数每次运行我们都称他为每一次渲染,每一次渲染函数内部都拥有自己独立 props 和 state,当在 jsx 中调用代码中 state 进行渲染,每一次渲染都会获得各自渲染作用域内...所以当定时器触发,拿 count 因为闭包原因是 DemoState 函数第一次渲染内部 count 值,alert 结果为0也就不足为奇了。...同样支持两个参数: 第一参数接受传入一个函数,传入函数调用返回值会被「记忆」。仅仅当依赖项发生变化时,传入函数才会重新执行计算新返回结果。...fn 表明如何格式化变量 value , 该函数只有在 Hook 被检查会被调用接受 debug 值作为参数,并且会返回一个格式化显示值。...当我们自定义一些 Hook ,可以通过 useDebugValue 配合 React DevTools 快速定位我们自己定义 Hook。

    1K20

    Java之父接受Evrone专访:您需要软件可靠性越高,静态类型语言帮助就越大

    我会以不同方式做一些事情有点奇怪。在 C 中有宏,这几乎是一场灾难,因为宏不是语言一部分;他们有点不在乎。Rust 的人试图在语言中很好地拟合宏。...Grigory:25 年前,当我开始自己软件开发职业生涯,我编写了大量 C 和 C++ 代码。我记得这些每月发生一次神秘指针错误。调试这样错误很痛苦。...如果您在工业环境中,我一生中大部分时间都在那里工作,那么工作一次会有点用处。必须每次都有效。一次工作和每次工作之间差异是巨大。因此,如果只需要工作一次,那么更动态语言工作得相当好。...但如果你正在做事情是......说,你是一个物理学家,你想找出一些计算结果,只需要运行一次。这取决于你正在做工作背景。您对软件可靠性要求越高,静态类型语言帮助就越大。...当他们试图一些不同语法热交换 Java 语法,他们面临哪些挑战? James:有点取决于你想要做什么。Java 虚拟机特点之一是内置了许多安全性和可靠性概念。

    58530

    代码调试最佳指南

    这本书中阐述一些代码调试应该遵循规则似乎很有道理,比如说“了解系统”,“让失败”,“别想了,先看看”,“分而治之”,“一次只改变一件事情”,“保持审查详细记录”,“从一个新角度看问题”,和“如果你没有修复...一次只改变一件事情——所有人都肯定地同意,在做实验来验证一个假设一次只改变一件事情是很重要。 ?...Peep是一个“Network Auralizer”,可以将系统上发生事情转换成声音。我花了10分钟试图编译,但迄今为止失败了,但它看起来很有趣,我想继续尝试!!...每当我程序有问题并且报告这样错误信息“Error:无法连接到某个IP端口443:连接超时”,我都想说:“谢谢,这就是我想知道事情”。...所以这个问题绝对不仅仅是初学者需要面临问题。 ? 结束语 当我在谈到代码调试技巧,我总感觉我遗漏了一件重要事情,那就是对人们在代码调试中哪里会遇到困难一种更深入理解。

    1.1K40

    代码调试最佳实践

    这本书中阐述一些代码调试应该遵循规则似乎很有道理,比如说“了解系统”,“让失败”,“别想了,先看看”,“分而治之”,“一次只改变一件事情”,“保持审查详细记录”,“从一个新角度看问题”,和“如果你没有修复...一次只改变一件事情——所有人都肯定地同意,在做实验来验证一个假设一次只改变一件事情是很重要。...Peep是一个“Network Auralizer”,可以将系统上发生事情转换成声音。我花了10分钟试图编译,但迄今为止失败了,但它看起来很有趣,我想继续尝试!!...每当我程序有问题并且报告这样错误信息“Error:无法连接到某个IP端口443:连接超时”,我都想说:“谢谢,这就是我想知道事情”。...所以这个问题绝对不仅仅是初学者需要面临问题。 结语 当我在谈到代码调试技巧,我总感觉我遗漏了一件重要事情,那就是对人们在代码调试中哪里会遇到困难一种更深入理解。

    96610
    领券