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

为什么在redux中使用不可变的数据结构时,选择器总是返回不可变的?

在Redux中使用不可变的数据结构是为了确保数据的一致性和可预测性。选择器是用于从Redux存储中获取数据的函数,它们的目的是根据应用程序的状态来计算派生数据。选择器的返回值应该是不可变的,这样可以确保选择器的结果在多次调用之间保持一致。

选择器返回不可变的数据有以下几个原因:

  1. 数据一致性:当选择器返回不可变的数据时,可以确保数据的一致性。如果选择器返回可变的数据,那么在多次调用之间,数据可能会被修改,导致选择器的结果不一致。
  2. 性能优化:选择器返回不可变的数据可以帮助Redux进行性能优化。当选择器的输入数据没有发生变化时,Redux可以使用缓存的结果,而不需要重新计算选择器的结果。
  3. 纯函数:选择器应该是纯函数,即相同的输入应该始终产生相同的输出。当选择器返回不可变的数据时,可以确保选择器是纯函数,因为不可变的数据不会被修改。
  4. 避免副作用:选择器返回不可变的数据可以避免副作用。如果选择器返回可变的数据,那么在修改选择器的结果时,可能会对其他部分的应用程序产生意外的影响。

在Redux中,可以使用Immutable.js等库来创建和操作不可变的数据结构。这些库提供了一些方便的方法来创建和更新不可变的数据,以确保选择器的结果是不可变的。

对于选择器的推荐腾讯云相关产品和产品介绍链接地址,由于不能提及具体的云计算品牌商,建议您参考腾讯云的文档和产品介绍页面,了解他们提供的与选择器相关的服务和解决方案。

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

相关·内容

Immer使用指南

Immer 简化了不可变数据结构处理 Immer 可用于需要使用不可变数据结构任何上下文中。 例如,结合 React 状态、React 或 Redux reducers 或配置管理等。...3.使用Immer,您不需要额外学习专用api或数据结构, 使用普通JavaScript数据结构并使用常规方式修改数据即可,操作简单且安全。 为什么要使用Immer?...当然,其效果和深拷贝对象是非常类似的,和操作一个对象完全复制体一样,修改 draft 时候并不会影响原来 baseState。 为什么直接使用深拷贝呢?...当访问 draft ,其定义 getter 会返回一个 Proxy 代理对象。 如果在 draft 中没有值变更或者变更值和原对象一致,则返回原对象。...当然,这个返回 copy 对象并不是原对象完全 copy, 而只是原对象基础上加上了相关变更数据,然后返回这个综合对象。

1.6K20

immer:优雅操作react数据状态,告别繁琐克隆拷贝

# 前言 Immer 是一个用于简化 JavaScript 状态管理库,以更方便地更新和操作不可变数据 可以解决以下问题: 不可变状态更新:React 推崇使用不可变(Immutable)数据来管理组件状态...:::tips 【Immutable 不可变对象】 直接修改状态或属性对象,而是创建新对象来代表改变后状态。...::: Immer 使得 React 中使用不可变数据更加容易,通过提供简洁 API 和直观语法,以可变方式更新不可变数据。...Redux reducer 中使用 produce 函数来更改状态。...# 总结 使用 React 组件,可以使用 produce 函数来更新状态,而在使用 Redux ,可以 reducer 中使用 produce 函数来进行状态更改操作。

43420

前端框架_React知识点精讲

❞ 从渲染方法返回可变immutable「React元素树」通常被称为虚拟DOMVirtual DOM 。...这个函数一般render方法中使用,「用于创建一个元素」。...React是依靠「数据引用相等」和「不可变更新操作」来判断是否触发重新渲染 Redux 遵循这种模式,要求「所有的状态更新都以不可变方式进行」 一些「后-redux全局状态管理解决方案中还有其他一些库...库 API更新类型 React-Redux 更新不可变 Recoil 更新不可变 Jotai 更新不可变 Zustand 更新不可变 Valtio 更新可变 运行时性能重新渲染优化 「手动优化」通常意味着创建订阅特定状态选择器函数...库 描述 React-Redux 利用特定选择器函数,「手动优化」 Recoil 通过订阅原子「半手动方式」 Jotai 通过订阅原子「半手动方式」 Zustand 利用特定选择器函数,「手动优化」

1.3K10

每一位 JS 开发者都应该学习如何使用 Rust

可变性 函数式编程语言以使用不可变数据结构闻名。...作为 JavaScript 开发者,我们并非必须使用不可变性,但像 Redux[2] 和 Immutable.js[3] 这些广受欢迎库,为我们树立了良好典范。...如今,我们有 let 和 const 关键字,可以分别声明可变和不可变变量。 Rust 中,我们只需用 let 来声明变量,默认情况下,它们就是不可变。...函数执行完毕,返回 main,x 已然失去了它意义。 前面的行为并非总是我们所期望,这就是为什么 Rust 中,我们可以借用东西!...结构体 Rust 虽然不是一门面向对象语言,但它有一些特性可以模拟面向对象语言某些行为。 JavaScript 中使用类,只需要在同一个地方处理数据和方法。

4800

2023年了,我还是选择 MobX

时至今日,前端各种状态管理方案仍层出穷,花式百样,争议不断,尤其是 React 社区。那我为什么要“背道而驰”,选择基本没什么声音 MobX 呢?...这篇文章会深入探讨 MobX 背后面向对象范式之争,以及可变数据与不可变数据之争。篇幅有点长,读者耐心读读会有收获。阅读,建议多留意一下目录,把握整篇文章叙述结构。...Vue 和 MobX 为代表可变响应式数据结构,还有 Redux 为代表可变数据。 可变数据好处对是数据操作符合习惯,毕竟 JavaScript 并不是一门函数式编程语言。...可变数据,我们通常使用响应式数据(事件/订阅模式)方案,渲染过程中收集数据订阅,当这些数据变更,触发对应组件渲染。...那为什么直接基于 Vue reactive API 封装类 MobX API, 支持使用 class 来编写呢?

28530

Redux 做状态管理,真的很简单🦆!

(2) 单向数据流(one-way data flow) Redux 单向数据流 用 state 来描述应用程序特定时间点状况 基于 state 来渲染出 View 当发生某些事情(例如用户单击按钮...Redux 期望所有状态更新都是使用不可变方式,因此,每一次 state 变更,不会修改原对象,而是修改前一个状态(state)克隆对象,以此来保证不可变性和正确性,同时记录每一次变化 state...(4) 纯函数更新 state 纯函数: 相同输入,总是会得到相同输出,并且执行过程中没有任何副作用函数。...简单总结一下: 推荐 React 项目中使Redux 作为状态管理 需要掌握 Redux设计思想 推荐使用 @redux-toolkit,可降低心智负担,显著提升研发效率 当掌握 @redux-toolkit...后,可补充阅读 Redux 原本 API,思考一下为什么 @redux-toolkit 要这么做?

3.4K40

React App 性能优化总结

1.使用不可变数据结构 数据不变性不是一种架构或者设计模式,它是一种编程思想。它会强制您考虑如何构建应用程序数据流。在我看来,数据不变性是一种符合严格单项数据流实践。...但是,最好使用一个提供不可变数据结构优化库。以下是您可以使用一些库: Immutability Helper:这是一个很好库,他可以不改变源情况下,提供修改后数据。...Seamless-immutable:一个用于提供不可变 JavaScript 数据结构库,他与普通数组和对象向后兼容。...Redux Connect ,同时使用 Reselect 来避免组件频繁重新渲染 Reselect 是 Redux 一个简单选择器库,可用于构建记忆选择器。...您可以将选择器定义为函数,为 React 组件检索 Redux 状态片段。

7.7K20

精读《一种 Hooks 数据流管理方案》

维护大型项目 OR UI 组件模块,一定会遇到全局数据传递问题。 维护项目,像全局用户信息、全局项目配置、全局功能配置等等,都是跨模块复用全局数据。...以前也有过不少利用 Redux 做局部数据流方案,但本质上还是全局数据流。...{ value } = useXXX(state => ({ value: state.value })) 可以引用到可变数据,但必须通过选择器来调用。...比如一个应用叫 gaea,那么 useGaea 就是对这个应用全局数据唯一调用入口,我可以组件里这么调用数据与方法: const Panel = () => { // appId 是应用不可变数据...})) } 可以发现,整个应用或者组件使用 Scope 中,已经做了一层抽象,即不关心数据是怎么来,只关心数据是否可变

50210

React-全局状态管理群魔乱舞

它允许开发者将他们状态「持久化在内存中」,并避免大型项目中,通过props将顶层数据,一层一层向下传递问题。早期开发React应用时,我们总是通过Redux来解决此类问题。...在这种情况下,一个弊端就是你必须写大量模板,以满足那些早已习惯数据可随时变更的人进行数据更新。 这就是为什么像Immer[5]这样库很受欢迎,它允许开发者编写可变风格代码。...手动优化一个例子是「通过选择器函数订阅一块存储状态」。通过选择器读取状态组件只有该特定状态更新才会重新渲染。 ❞ ❝第二种是为开发者「自动处理」,这样他们就不必考虑手动优化。...不再强调Redux作用 随着我们遇到更多这样痛点,启动一个新项目默认使用 Redux 做法变得不受欢迎。...库 API更新类型 React-Redux 更新不可变 Recoil 更新不可变 Jotai 更新不可变 Zustand 更新不可变 Valtio 更新可变 运行时性能重新渲染优化 「手动优化」通常意味着创建订阅特定状态选择器函数

3.7K20

Redux进阶(Immutable.js) 更好阅读体验Immutable.js原生Js遇到问题使用Immutable解决问题使用Immutable需要注意点参考

Immutable.js Immutable优势 1. 保证不可变(每次通过Immutable.js操作对象都会返回一个新对象) 2. 丰富API 3....性能好 (通过字典树对数据结构共享) Immutable问题 1....),再加上我们使用了connect这个高阶组件,官方文档中虽然说react-redux做了一些性能优化,但终究起来,react-redux只是对传入参数进行了一个浅比较来进行re-redering(为什么不能在...mapStateToProps中使用toJs原因)。...只做浅比较,有可能会造成re-redering不符合预期(多次渲染或更新) 为什么不使用深比较 或许有人会疑惑,为什么不使用深比较来解决re-redering问题,答案很简单,因为消耗非常巨大~

1.3K51

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

Redux Redux,只有一家商店,它是唯一真理来源。存储中状态是不可变,这使得我们更容易知道在哪里可以找到数据/状态。...数据结构 Redux Redux使用普通JavaScript对象作为数据结构来存储状态。使用Redux,必须手动跟踪更新。需要维护大量状态应用程序中,这可能更困难。...MobX中,更新是自动跟踪,因此对开发人员来说更容易。 获奖者:MobX 纯与不纯 Redux Redux中,存储中状态是不可变,这意味着所有状态都是只读。...Mobx MobX中,状态是可变,这意味着您可以简单地用新值更新状态。这让黑帮变得不纯洁。不纯函数很难测试和维护,因为它们并不总是返回可预测输出。...样板代码 Redux 关于Redux最大抱怨之一是它附带大量样板代码。当您将React与Redux集成,会产生更多样板代码。这是因为Redux本质上是显式,很多功能都必须显式地编码。

1.5K30

「首席架构师推荐」React生态系统大集合

- React可变数据存储 react-resolver - 用于React组件递归延迟加载数据同构库 freezer-js - React轻量级和React式不可变数据结构 MobX -...ClojureScript中可变数据库和Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件库(如React)中从上到下属性历史记录 seamless-immutable...Boilerplates 创建React Native App - 没有构建配置任何操作系统上创建React Native应用程序,包含或包含Expo Snowflake - 使用Redux,Parse.com...redux-thunk - 用于reduxThunk中间件 redux-logger - 用于reduxLogger中间件 reselect - Redux选择器库 normalizr - 根据模式规范化嵌套...- 一个简单redux中间件,用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 ES6中使用React和Redux

12.3K30

React面试基础

,是不可变,可以从父组件传入参数配置该组件。...我们可以为添加ref属性然后回调函数中接受该元素DOM树中句柄,该值会作为回调函数第一个参数返回: class CustomForm exrends Component { handleSubmit...包含了一个ref属性,该属性声明回调函数会接收input对应DOM元素,我们将其绑定到this指针以便在其他类函数中使用。...Flux和Redux主要区别在于Flux有多个可以改变应用状态store,Flux中dispatcher被用来传递数据到注册回调事件;Redux中只能定义一个可更新状态store,redux把...Redux缺点: 一个组件所需要数据,必须由父组件传过来,而不能向Flux一样直接从store获取。 当一个组件数据更新,即使父组件不需要用到这个组件,夫组件还是会重新render。

1.5K20

Redux

不知道某一刻应用到底发生了什么,因为不知道何时、为何、怎样发生状态变化。...系统不透明,很难复现bug和添加新特性 希望通过强制单向数据流来降低复杂度,提升可维护性和代码可预测性 三.核心理念 Redux用一棵不可变状态树维护整个应用状态,无法直接改变,发生变化时,通过action...每次都返回维护(修改)输入state 所以能随便调整reducer执行顺序,放电影一样调试控制得以实现 六.react-redux Redux与React没有任何关系,Redux作为状态管理层可以配合任何...用不可变数据结构,是出于性能(不可变相关额外处理)和灵活性(可以配合const、immutablejs等使用)考虑 八.问题与思考 1.state变化订阅机制粒度控制是怎样?...应该是把store挂在hostContainerInfo上了,所以要求render root把Provider作为顶层容器: render(

1.2K40

Immutable.js 到底值不值得用?

导语 我是一个前端开发人员,拥有四年工作经验,目前一个大型软件团体里工作,制作一个以React框架和Redux库为基础建立起来新单页程序。...使用React框架和Redux,不可变数据能帮助巩固这两者核心原则:如果程序状态(app state)没有发生改变,那网页文档对象模型(DOM)也不用改变。...这是通过react-redux模块“connect()”修饰函数来实现程序开发过程中,我们注意到了以下优点和缺点。...[优点]强化了不可变性 不管选用哪个库,使用不可变数据类型头一条理由肯定是能够保证做项目的人不能违反不可变原则。...代码为什么不对?既然看了还不明白,最终大家都会使用终端日志console.log()大法。不过很可惜,用日志审查数据时会发现自己一直自定义数据类型属性里翻来翻去。

1.9K50

Mobx与Redux异同

因为关联状态多,传递复杂,很容易出现像某个组件莫名其妙更新或者更新情况,异常排查也会困难重重。...也就是说当应用膨胀到一定程度,推算应用状态将会变得越来越困难,此时整个应用就会变成一个有很多状态对象并且组件层级上互相修改状态混乱应用。...像Redux和Mobx这类状态管理库一般都有附带工具,例如在React中使有react-redux和mobx-react,他们使你组件能够获得状态,一般情况下,这些组件被叫做容器组件container...Mobx使用可观察对象,通常是使用observable让数据变化可以被观察,通过把属性转化成getter/setter来实现,当数据变更将自动触发监听响应。...不可变可变 Redux状态对象通常是不可变Immutable,复制代码我们不能直接操作状态对象,而总是原来状态对象基础上返回一个新状态对象。

88320

前端-关于 Vue 和 React 区别的一些笔记

因为一般都会用一个数据层框架比如 Vuex 和 Redux,所以这部分不作过多解释,最后 vuex 和 redux区别 中也会讲到。 数据流不同 ? 大家都知道Vue中默认是支持双向绑定。...为什么 Vue 采用 HoC 方式来实现呢? 高阶组件本质就是高阶函数,React 组件是一个纯粹函数,所以高阶函数对React来说非常简单。...这些都是vue创建组件实例时候隐式干的事。由于vue默默帮我们做了这么多事,所以我们自己如果直接把组件声明包装一下,返回一个高阶组件,那么这个被包装组件就无法正常工作了。...但是Vue中,由于模板中使数据都必须挂在 this 上进行一次中转,所以我们import 一个组件完了之后,还需要在 components 中再声明下,这样显然是很奇怪但又不得不这样做法。...从实现原理上来说,最大区别是两点: 1、Redux 使用是不可变数据,而Vuex数据是可变

5K40

redux你用对了吗?

维基百科里是这么定义纯函数: 程序设计中,若一个函数符合以下要求,则它可能被认为是纯函数 此函数相同输入值,需产生相同输出。...为什么reducer需要返回一个全新state 上面我们介绍了什么是纯函数,redux 里面规定 reducer 必须是一个纯函数,并且每个纯函数需要返回一个全新state,那么这里大家肯定就有一个疑问...,所以,当 reducer 函数直接返回 state 对象,这里浅比较就会失败,redux 认为没有任何改变,从而导致页面更新出现某些意料之外事情。...immer 是 mobx 作者写一个 immutable 库,核心实现是利用 ES6 proxy,几乎以最小成本实现了 js 可变数据结构,简单易用、体量小巧、设计巧妙,满足了我们对 js...不可变数据结构需求。

54530

vue和react区别

React默认是通过比较引用方式(diff)进行,如果优化可能导致大量不必要VDOM重新渲染。为什么React不精确监听数据变化呢?...但是Vue中,由于模板中使数据都必须挂在 this 上进行一次中转,所以我们import 一个组件完了之后,还需要在 components 中再声明下,这样显然是很奇怪但又不得不这样做法。...React应用状态被改变,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认优化。...Redux中,我们每一个组件都需要显示用connect把需要props和dispatch连接起来。...从实现原理上来说,最大区别是两点:Redux使用是不可变数据,而Vuex数据是可变,因此,Redux每次都是用新state替换旧state,而Vuex是直接修改。

64630
领券