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

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

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

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

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

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

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

相关搜索:在Oracle中使用动态sql查询返回可变数量的列在使用不可变变量时,关闭MapStruct中的“生成器”如果我在代码的不同位置使用不可变变量,为什么会出现借用的错误?在Python中使用可变长度参数时,如何接受来自用户的参数?在Typescript (编译时)中是否可以使用不可变的命名参数(带有默认值)?在Delphi中使用带有可变字符串日期值的UniQuery传递MySQL日期范围查询时返回NULL为什么我在使用Redux-Persist时总是收到内存不足的错误?为什么不总是在Java中使用ArrayLists而不是普通的'数组?为什么在声明可变大小的C数组时,我没有收到编译错误?在使用scala case类时,Flink不允许POJO对象使用不可变的样式设置器为什么redux-sessionstorage在恢复状态时不更新节点的属性?PlaylistItems: list在使用不带代码段的part:id时不返回videoId在iOS上的KMM项目中使用后台线程时出现无效的可变性异常(JavaScript,Redux)为什么我的嵌套数组在返回时会被删除,而当我不返回时却不会?为什么在fortran中使用函数和contains时总是得到相同的结果为什么我的redux状态在页面刷新时返回到初始值?为什么在flutter中使用provider时不执行类的构造函数?在Matlab中使用嵌套的for循环从数据结构中提取结果时出错。为什么?为什么TypeScript在返回隐式类型返回对象的无效属性时不抛出错误?为什么在传递递减值的列表"cum_weights“时,"random.choices”总是返回相同的元素?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Immer使用指南

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

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

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

    1.2K20

    前端框架_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 中使用类时,只需要在同一个地方处理数据和方法。

    10800

    用 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.5K40

    2023年了,我还是选择 MobX

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

    52630

    React App 性能优化总结

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

    7.7K20

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

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

    3.8K20

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

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

    53810

    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

    「首席架构师推荐」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 - 用于redux的Thunk中间件 redux-logger - 用于redux的Logger中间件 reselect - Redux的选择器库 normalizr - 根据模式规范化嵌套...- 一个简单的redux中间件,用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 在ES6中使用React和Redux

    12.4K30

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

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

    1.6K30

    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.3K40

    Immutable.js 到底值不值得用?

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

    2K50

    Mobx与Redux的异同

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

    94220

    redux你用对了吗?

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

    59030

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

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

    6K40

    你要的 React 面试知识点,都在这了

    它没有副作用,例如设置全局状态,更改应用程序状态,它总是将参数视为不可变数据。 我想使用 appendAddress 的函数向student对象添加一个地址。...shouldComponentUpdate() 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。...这用于在组件树中出现错误时记录错误。 超越继承的组合 在React中,我们总是使用组合而不是继承。我们已经在函数式编程部分讨论了什么是组合。这是一种结合简单的可重用函数来生成高阶组件的技术。...匹配时,更新对应的内容返回新的 state。 当Redux状态更改时,连接到Redux的组件将接收新的状态作为props。当组件接收到这些props时,它将进入更新阶段并重新渲染 UI。 ?...它不会改变 state 而是总是返回 state 。

    18.5K20
    领券