首页
学习
活动
专区
工具
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对象不会被回收,于是就不会出现不同的节点互相覆盖的问题

50420
  • 谁动了我的Token | TW洞见

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

    83690

    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(..) 调用。

    68580

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

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

    58120

    2月幽默集合(上)

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

    58520

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

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

    47920

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

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

    57520

    宝啊~来聊聊 9 种 React Hook

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

    1.1K20

    2022社招react面试题 附答案

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

    2.1K10

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

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

    58730

    代码调试最佳实践

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

    97810

    【React】946- 一文吃透 React Hooks 原理

    但是在function组件中,每一次更新都是一次新的函数执行,为了保存一些状态,执行一些副作用钩子,react-hooks应运而生,去帮助记录组件的状态,处理一些额外的副作用。...那么通过调用lastRenderedReducer获取最新的state,和上一次的currentState,进行浅比较,如果相等,那么就退出,这就证实了为什么useState,两次值相等的时候,组件不渲染的原因了...当我们调用useEffect的时候,在组件第一次渲染的时候会调用mountEffect方法,这个方法到底做了些什么?...如果第一个参数是一个函数,会引用上一次 update产生的 state, 所以需要循环调用,每一个update的reducer,如果setNumber(2)是这种情况,那么只用更新值,如果是setNumber...答案:这种情况,一般会发生在,当我们调用setNumber时候,调用scheduleUpdateOnFiber渲染当前组件时,又产生了一次新的更新,所以把最终执行reducer更新state任务交给下一次更新

    2.7K40
    领券