首页
学习
活动
专区
工具
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 结合使用,提供稳定高效的数据存储和管理能力。

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

相关·内容

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.4K22

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

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.5K30

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

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

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

98720

必须要会 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计算过程就叫做ReducerReducer是一个函数,它接受Action和当前State作为函数,返回一个State。...以后每当store.dispatch发送过来一个 Action,就会自动调用 Reducer,得到 State。 为什么这个函数叫做 Reducer 呢?

58420

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

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

1.9K11

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

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

1.7K10

redux当做观察者单独使用

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

1.5K21

Redux 设计理念到源码分析

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

90830

freeCodeCamp | Front End Development Libraries | 笔记

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

49710

前端高频react面试题

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

3.3K20

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

【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.1K30

一天梳理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

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

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

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

3.3K10
领券