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

为什么我的reducer要将新对象添加到redux存储中,而不是更改当前对象的值?

在 Redux 中,reducer 是用来处理应用状态变化的纯函数。当一个 action 被分发到 Redux store 时,reducer 接收到当前的状态和该 action,并根据 action 的类型来决定如何更新状态。

在 Redux 中,状态是不可变的,这意味着我们不能直接修改原始对象的值。相反,我们需要创建一个新的对象来代替原始对象,并将新对象添加到 Redux 存储中。这是因为 Redux 使用了浅拷贝的方式来比较前后状态的差异,如果直接修改原始对象的值,Redux 将无法检测到状态的变化,从而无法正确地更新应用程序的视图。

将新对象添加到 Redux 存储中的优势是:

  1. 状态的不可变性:通过创建新的对象来代替原始对象,确保了状态的不可变性。这样可以避免意外的副作用和数据竞争,使得状态的变化更加可控和可预测。
  2. 时间旅行调试:由于每个状态都是不可变的,Redux 可以轻松地实现时间旅行调试功能。这意味着我们可以回溯到任何一个特定的状态,并查看应用程序在该状态下的行为和数据。
  3. 性能优化:由于状态的不可变性,Redux 可以使用浅比较来检测状态的变化,从而避免不必要的重新渲染和计算。这可以提高应用程序的性能和响应速度。

对于你提到的将新对象添加到 Redux 存储中的具体应用场景,这取决于你的业务需求和数据结构设计。一般来说,当我们需要更新状态中的某个属性或者添加新的属性时,都应该创建一个新的对象,并将其添加到 Redux 存储中。

在腾讯云的产品中,与 Redux 相关的推荐产品是云数据库 CDB(https://cloud.tencent.com/product/cdb)和云存储 COS(https://cloud.tencent.com/product/cos)。云数据库 CDB 提供了高可用、可扩展的数据库服务,可以用来存储和管理应用程序的状态数据。云存储 COS 则提供了安全可靠的对象存储服务,可以用来存储和管理应用程序中的静态资源文件。这些产品可以与 Redux 结合使用,提供稳定高效的数据存储和管理能力。

相关搜索:为什么我的对象返回的是属性对象而不是值?为什么要将新的Array对象添加到此Array中?如何在react redux reducer状态下更改数组中的对象值?为什么我丢失了这些带有智能指针的构造对象,而不是新对象?为什么我的数组打印的是对象的位置而不是值?为什么我的对象的值是函数而不是字符串?为什么我的对象键,值对被覆盖而不是创建一个新的键,值对?将新数组对象添加到react redux reducer中的嵌套数组,并将数组添加到存储更新中的数组,但不添加react组件当我尝试将一个对象添加到集合中时,所有对象的值都被更改为当前对象,是如何更改的?我如何返回对象属性的链接,而不是Python3中的值?为什么我的类节点会覆盖自身而不是创建一个新的节点对象为什么我在计算对象中得到的对象属性是未定义的,而不是对象本身?在这种情况下,哪种方法更适合?如果我从不创建新对象,而只是通过更新它的值来不断地将旧对象添加到列表中,那该怎么办?从我的组件中的存储区呈现一个对象数组,并在使用调度程序调用onPress时更改对象中的值为什么值的属性存储在我的对象字符串中,我如何访问它们以增加出现的次数?我有一个自举的数据对象,但想要每次试验的观察值总和,而不是rstudio中的总体合计通过id定位数组中的对象,并根据变量参数更改其值:为什么我的代码可以工作?如何在(angularfire2 / Ionic)中更新firebase数据的嵌套对象,并且我想用给定值而不是键来更新Redux + React如何在充满对象的数组中只更改一个元素值?我有可以工作的应用程序,只是想确保我做得正确为什么这个map函数在react中接收的是对象而不是字符串。我需要使用item.item来呈现一个字符串
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React进阶(1)-理解Redux

,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装 组件数据的改变只能通过纯函数完成 所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var...: 1, 当前元素在数组中的索引: 0, 调用的数组: 1,2,3,4,5,6 VM1742:3 上一次调用回调返回的值(或者是提供的初始值): 1,数组中当前被处理的元素: 2, 当前元素在数组中的索引...中,每个reducer纯函数如下所示 reducer(state, action) 其中reducer函数的第一个参数state是指当前的状态值,而第二个参数action是接收到的action对象 而reducer...函数要做的事情就是根据state和action的值产生一个新的对象返回给Store,它是定义整个组件应用状态如何更改,根据Action动作行为去更新Store中的状态 注意的是reducer必须是纯函数

1.5K22

React进阶(1)-理解Redux

,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装 组件数据的改变只能通过纯函数完成 所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var...: 1, 当前元素在数组中的索引: 0, 调用的数组: 1,2,3,4,5,6 VM1742:3 上一次调用回调返回的值(或者是提供的初始值): 1,数组中当前被处理的元素: 2, 当前元素在数组中的索引...中,每个reducer纯函数如下所示 reducer(state, action) 其中reducer函数的第一个参数state是指当前的状态值,而第二个参数action是接收到的action对象 而reducer...函数要做的事情就是根据state和action的值产生一个新的对象返回给Store,它是定义整个组件应用状态如何更改,根据Action动作行为去更新Store中的状态 注意的是reducer必须是纯函数

1.2K20
  • React进阶(3)-上手实践Redux-如何改变store中的数据

    __REDUX_DEVTOOLS_EXTENSION__(),这行代码配置添加到createStore()的第二个参数上 const store = createStore(reducer, window...'){           // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...随之创建一个实时记录本(reducer) 真正的新老房信息的变更操作都是在reducer这个函数中完成的,并且它是一个纯函数,必须要有返回值 在Reducer函数中,接收两个参数,第一个是上一次组件的状态值...里面进行一些逻辑判断操作 并且在reducer中只能读取state,并不能修改,如果想要修改,需要拷贝一份state出来,在新的state基础上进行操作,同时也要将这个新的state进行返回.达到一个以新换旧的操作...,reducer相互之间的关系,如果不清晰他们之间的关系,在遇到复杂的大型项目时,各个文件切来切去的,绝对是一头雾水,懵逼的,维护起来也是想死的心都有 结语 本文并不是什么高大上的内容,主要是对学习Redux

    2.6K30

    React进阶(3)-上手实践Redux-如何改变store中的数据

    '){ // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...(reducer) 真正的新老房信息的变更操作都是在reducer这个函数中完成的,并且它是一个纯函数,必须要有返回值 在Reducer函数中,接收两个参数,第一个是上一次组件的状态值,而第二个是组件具体的动作...store,在一开始constructor函数或者componentWillMount函数中,调用getState()方法,从而获得了state的数据,最终显示到页面上 而如果想要更改store的数据,...这样的话store就真正的知道了具体的动作,而具体的数据变更等操作,需要在reducer这个实时记录本中进行变更操作,在reducer里面进行一些逻辑判断操作 并且在reducer中只能读取state,...并不能修改,如果想要修改,需要拷贝一份state出来,在新的state基础上进行操作,同时也要将这个新的state进行返回.达到一个以新换旧的操作 最后在组件中如何感知到store的变化,实现数据的同步更新呢

    2.2K20

    【offer 收割计划】你知道为什么 reducer 最好是一个纯函数吗?

    此外伪类一般是单冒号,例如 :hover 伪元素:从字面上看,它是一个假的元素,我也是这么理解的,它类似添加一个新的 DOM 节点到 DOM 树上,而不是改变元素的状态。...首先如果 redux 中的 reducer 如果不是一个 纯函数的话会造成什么后果呢?...,来看看它到底是什么原因造成的,Redux 接收一个 state 对象,然后通过 for 循环,将 state 的每一部分传递给对于的 reducer ,如果发生任何改变, reducer 将返回一个新的对象...原因是,如果这里采用了深比较的方式,当比较的次数很多时,性能消耗特别大,因此 redux 对 reducer 做了一个规定,无论发生什么变化时,都需要返回一个新的对象;没有变化时,返回旧的对象。...state 和 action 参数计算新的状态值 它们不允许修改当前的 state。

    1K20

    必须要会的 50 个React 面试题(下)

    没有维持自己的状态 1. 保持着自己的状态 2.数据由父组件控制 2.数据由 DOM 控制 3. 通过 props 获取当前值,然后通过回调通知更改 3. Refs 用于获取其当前值 30....这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。 React Redux 34. MVC框架的主要问题是什么?...解释 Reducer 的作用。 Reducers 是纯函数,它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作,然后它返回一个新的状态。...它根据操作的类型确定需要执行哪种更新,然后返回新的值。如果不需要完成任务,它会返回原来的状态。 43. Store 在 Redux 中的意义是什么?...因此,Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据,并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。 44.

    3.5K21

    Redux初学者入门解析

    在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。...store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态,需要分发一个action。...它可以查看之前的状态,执行一个action并且返回一个新的状态。 什么情况下用Redux 在很多知名博主的博客或教程中都说过,Redux是一个很有用的架构,但不是非用不可。...这种State的计算过程就叫做Reducer。 Reducer是一个函数,它接受Action和当前State作为函数,返回一个新的State。...以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。 为什么这个函数叫做 Reducer 呢?

    61320

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    撰文 | 川川 前言 撰文:川川 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...__REDUX_DEVTOOLS_EXTENSION__()); // 创建好reducer后,需要将reducer作为参数传到createStore当中去,这样store才能拿到reducer的state...中的store,action,以及reducer分离开来,各自独立的管理,职责分明,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux的工作流程不是很清晰...,编写action,拆分action代码,其中获取store就用getState方法,而更改store就要通过dispatch派发action,这个流程是固定的 要理解Store是用来存储组件的公共数据状态的...,它就是一个把Reducer关联到一起的一个对象,而Reducer就是根据Action发出的type(动作类型)来做某些事情 当然这个代码仍然优化的地方,我们在后续当中,仍会进一步的拆分的

    1.7K10

    React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

    image.png 前言 在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...从这个目录树中,非常清楚了的,由起初在index.js的代码,把redux中的store,reducer,action逐渐剥离出去单独管理了的 结语 本小节主要是对上一节代码的拆分,将Redux中的...store,action,以及reducer分离开来,各自独立的管理,职责分明,如果项目比较简单,一开始是可以写在一块的,然后一点的拆分出去的 如果不是老司机,一开始一上来就拆分,如果对Redux的工作流程不是很清晰...,编写action,拆分action代码,其中获取store就用getState方法,而更改store就要通过dispatch派发action,这个流程是固定的 要理解Store是用来存储组件的公共数据状态的...,它就是一个把Reducer关联到一起的一个对象,而Reducer就是根据Action发出的type(动作类型)来做某些事情 当然这个代码仍然优化的地方,我们在后续当中,仍会进一步的拆分的

    2K11

    freeCodeCamp | Front End Development Libraries | 笔记

    这是 reducer 函数的工作, Redux 中的 reducer 负责为响应 action 而发生的状态修改。...然后,编辑 authReducer() 和 Action 创建者以引用这些常量而不是字符串值。 注意:通常约定以 全大写 形式写入常量,这也是 Redux 中的标准做法。...最后,修改 render() 方法, 使其映射从 props 而不是 state 接收的消息。 进行这些更改后,应用将继续正常运行,但 Redux 管理状态除外。...然后,编辑 authReducer() 和 Action 创建者以引用这些常量而不是字符串值。 注意:通常约定以 全大写 形式写入常量,这也是 Redux 中的标准做法。...最后,修改 render() 方法, 使其映射从 props 而不是 state 接收的消息。 进行这些更改后,应用将继续正常运行,但 Redux 管理状态除外。

    65110

    从 Redux 设计理念到源码分析

    前言 Redux 也是我列在 THE LAST TIME 系列中的一篇,由于现在正在着手探究关于我目前正在开发的业务中状态管理的方案。所以,这里打算先从 Redux 中学习学习,从他的状态中取取经。...为什么要使用 Redux 如上所说,我们现在是状态驱动 UI,那么为什么需要 Redux 来管理状态呢?react 本身就是 state drive view 不是。...在 Redux 中,整个应用的 state 都被存储到一个object 中。当然,这也是唯一存储应用状态的地方。我们可以理解为就是一个 Object tree。...而这里我们说的纯函数来修改,其实就是我们上面说的 reducer。 Reducer 就是纯函数,它接受当前的 state 和 action。然后返回一个新的 state。...而 combineReducers也是我认为是费巧妙的设计。所以这些篇幅,就放到下一篇吧~ 参考链接 redux 10行代码看尽Redux实现 Redux 中文文档

    94630

    把redux当做观察者单独使用

    我们知道在观察者模式中,观察者对象一般会有两个方法,一个用来监听事件,一个用来发布消息,另外其内部一般有一个不可以见的属性来存储事件,这个属性通常为一个数组。...redux会将生成一个store对象,这个对象可以理解为是一个观察者,只不过其内部保存了像树一样的数据结构,而更改数据结构,和更改产生的后果就借鉴了观察者模式。...上面的代码是有点需要优化的,我们在开发时,store往往比较复杂,我们需要将不同的状态保存到不同的reducer中,而不是统一放在一起。...在开发中通常我们使用dispatch时一般是传递一个对象,但是有时为了方便,我们通常将action作为函数的返回值,代码如下: // 生成action的函数 function createAction...传递一个函数,注意事函数,而不是函数执行,dispatch会自动先调用函数,这个函数的格式是固定的,其参为dispatch,其内部既获取了数据后又可以同步执行dispatch。

    1.5K21

    【19】进大厂必须掌握的面试题-50个React面试

    一旦完成计算,将仅使用实际已更改的内容来更新实际DOM。 8.为什么浏览器无法阅读JSX? 浏览器只能读取JavaScript对象,而不能读取普通JavaScript对象中的JSX。...有状态组件 无状态组件 1.将有关组件状态更改的信息存储在内存中 1.计算组件的内部状态 2.有权更改状态 2.无权更改状态 3.包含状态的过去,当前和将来可能发生的变化的知识 3.不包含过去,当前和将来可能发生的状态变化的知识...受控组件 不受控制的组件 1.他们不保持自己的状态 1.他们保持自己的状态 2.数据由上级组件控制 2.数据由DOM控制 3.他们通过道具获取当前值,然后通过回调通知更改 3.引用用于获取其当前值 30...用Redux开发的应用程序易于测试,并且可以在表现出一致行为的不同环境中运行。 37. Redux遵循的三个原则是什么? 单一事实来源:整个应用程序的状态存储在单个存储中的对象/状态树中。...Reducer是纯函数,用于指定应用程序的状态如何响应ACTION进行更改。减速器通过采用先前的状态和操作来工作,然后返回新的状态。它根据操作的类型确定需要执行哪种更新,然后返回新值。

    11.2K30

    一天梳理React面试高频知识点

    react有什么特点react使用过的虚拟DOM,而不是真实DOMreact可以用服务器渲染react遵循单向数据流 或者数据绑定React 中的key是什么?为什么它们很重要?...因为 React 需要将组件转化为虚拟 DOM 树,所以在编写代码时,实际上是在手写一棵结构树。而XML 在树结构的描述上天生具有可读性强的优势。...在 Reducer文件里,对于返回的结果,必须要使用 Object.assign ( )来复制一份新的 state,否则页面不会跟着数据刷新。...Redux实现原理解析为什么要用redux在React中,数据在组件中是单向流动的,数据从一个方向父组件流向子组件(通过props),所以,两个非父子组件之间通信就相对麻烦,redux的出现就是为了解决...,而不是直接通知其他组件,组件内部通过订阅store中的状态state来刷新自己的视图图片Redux三大原则唯一数据源整个应用的state都被存储到一个状态树里面,并且这个状态树,只存在于唯一的store

    2.8K20

    【React】211- 2019 React Redux 完全指南

    Store 需要一个 Reducer 因此,有件关于 Redux 的事:它并不是非常智能。 你可能期待通过创建一个 store,它会给你的 state 一个合适的默认值。或许是一个空对象?...你的函数调用时会接收两个参数:上一次迭代的结果,和当前数组元素。它结合当前元素和之前的 “total” 结果然后返回新的 total 值。...给 Reducer 一个初始状态 记住 reducer 的职责是接收当前 state 和一个 action 然后返回新的 state。 它还有另一个职责:在首次调用的时候应该返回初始 state。...但那不是一个很好的习惯,因为组件需要知道 Redux state 的结构然后从中挑选它需要的数据,后面如果你想更改结构会变得更难。...应该 dispatch(increment()) ✅ 牢记 action 生成器是一个平凡无奇的函数。Dispatch 需要 action 是一个对象,而不是函数。

    4.3K20

    前端高频react面试题

    :处理action,返回新的state;通俗点解释:首先,用户(通过View)发出Action,发出方式就用到了dispatch方法然后,Store自动调用Reducer,并且传入两个参数:当前State...和收到的Action,Reducer会返回新的StateState—旦有变化,Store就会调用监听函数,来更新View以 store 为核心,可以把它看成数据存储中心,但是他要更改数据的时候不能直接修改...(1)React中setState后发生了什么在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发调和过程(Reconciliation)。...中,每次进入页面判断sessionStorage中有没有存储的那个值,有,则读取渲染数据;没有,则说明数据是初始化的状态。...在当前组件的 props中,包含 location属性对象,包含当前页面路由地址信息,在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。

    3.4K20

    Redux 快速上手指南

    Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。...具体的模型图如下图所示: 为了说明整个模型的运作流程,首先我们需要弄清Redux模型中的几个组成对象:action 、reducer、store。...任何UI组件都可以直接从store访问特定对象的状态。 在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 ,在一个应用程序中只能有一个store对象。...另外在组件的树状阶层结构,父组件(拥有者)与子组件(被拥有者)的关系上,子组件是只能由父组件以props(属性)来传递属性值,子组件自己本身无法更改自己的props,这也是为什么一开始在学习React时...payload - 用于更新状态的数据。 创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问,但只能通过提供的reducer进行更新。

    1.3K20

    redux(应用的状态管理器)有那么难吗?没有!

    Redux是什么? Redux其实很简单,总结起来就三句话: ✦ 将整个应用的state储存在唯一的store对象中。...:实际项目中,我们应该尽量减少action中附带的数据,比如想要更新某篇文章的标题,我们只需要携带文章id和文章新标题即可,而不需要携带整个新文章字段。...为了让action更便于维护,我们通常使用action creator而不是action。 action creator action create就是一个简单的函数,直接将action作为返回值。...告诉我一个带新数据的action,我会通过reducer自动修改,然后返回修改后的数据给你! 是的,redux很想“数据库”,数据被集中存储,并且只能通过“预先定义的action操作”来修改。...而引入redux之后,我们单纯的面向数据编程即可,我们在Redux中统一的管理数据,然后数据变换会反映到view上,而数据上的交互,本质上也是触发了Redux中的action。

    3.4K10
    领券