开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

redux存储中的状态已更改，但视图中的组件未更改

Redux是一个用于管理JavaScript应用程序中共享状态的库。它使用单一状态树的概念，将应用程序的状态存储在一个中心化的存储库中。当Redux存储中的状态更改时，应用程序的视图应该相应地更新以反映这些更改。如果Redux存储中的状态已更改，但视图中的组件未更改，则可能是以下几个原因导致的：

错误的状态更新：在Redux中，通过派发一个动作来触发状态的更新。如果状态更新的过程中出现错误，可能导致存储中的状态更新，但是没有正确地通知视图进行更新。解决此问题的方法是确保正确地派发和处理动作，并确保状态更新的代码逻辑正确无误。
不正确的组件连接：Redux使用了容器组件和展示组件的分离模式，容器组件负责与Redux存储进行交互，展示组件负责渲染UI。如果容器组件没有正确地与Redux存储连接，并将状态传递给展示组件，那么即使状态已更改，展示组件也无法接收到新的状态。解决此问题的方法是检查容器组件的连接代码，确保正确地将状态映射到展示组件。
引用相等性问题：在React中，组件的更新是基于其props和state的变化的。如果Redux存储中的状态更新，但是传递给展示组件的props没有变化，那么展示组件将不会重新渲染。这通常是由于在Redux存储中对状态进行了修改，但是返回的是一个新的对象引用，而不是修改原始对象。为了解决此问题，可以使用浅拷贝或深拷贝来确保返回一个新的对象引用，从而触发组件的重新渲染。

总结来说，如果Redux存储中的状态已更改，但是视图中的组件未更改，需要检查状态更新的代码逻辑、组件连接以及属性的引用相等性，以确保状态的更改能够正确地反映在视图中。同时，建议使用腾讯云的相关产品来构建和部署云计算应用，例如腾讯云的云函数（https://cloud.tencent.com/product/scf）和云原生容器服务 TKE（https://cloud.tencent.com/product/tke）等。

相关搜索:Redux状态的更改未反映在组件中 react+redux:存储区的状态已更改，但未更改视图等待redux存储的状态更改 React组件未更新redux状态存储中映射(数据结构)的更改 React redux状态已更改，但在组件视图中它不会更新UI 状态已更改，但react中的render方法未触发使用redux更改组件中的状态 Redux ToolKit中的派单未更改状态 redux-状态更改，但组件不显示重新呈现的视图使用Redux更改根组件的状态/属性？如何重用使用React & Redux更改状态的组件名称不同但数组相同的状态已更改 React Redux容器中的状态更改通过lapply()返回R中已更改的列表，但列表中的对象未更改 React/Redux -具有Redux更新的子组件，用于某些父状态更改，而不是其他父状态更改更改本地存储中的状态 React redux未更新mapStateToProps中的组件状态 Redux Reducer函数中的意外状态更改页面不会重新呈现，尽管redux中的状态更改和组件更改的道具也是如此在视图中滚动组件时，如何更改组件的状态？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

优化 React APP 的 10 种方法

由于Redux实行不变性，这意味着每次操作分派时都会创建新的对象引用。这将影响性能，因为即使对象引用发生更改但字段未更改，也会在组件上触发重新渲染。...因此，重新选择可通过浅遍遍遍prev和当前Redux状态字段来检查宝贵的时间，尽管它们具有不同的内存引用，但它们是否已更改。...如果字段已更改，它将告诉React重新渲染；如果没有字段已更改，则尽管创建了新的状态对象，它也会取消重新渲染。 6. 使用 Web worker JS代码在单个线程上运行。...现在，看到按下按钮时，该按钮会将状态设置为0。如果连续按下按钮，则状态始终保持不变，但是尽管传递给其道具的状态相同，但My组件仍将重新渲染。...这些组件树使其具有父子关系，即在组件中更新绑定数据时，将重新呈现该组件及其子组件，以使更改传播到整个子组件树中。

33.9K2 0

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

有状态组件无状态组件 1.将有关组件状态更改的信息存储在内存中 1.计算组件的内部状态 2.有权更改状态 2.无权更改状态 3.包含状态的过去，当前和将来可能发生的变化的知识 3.不包含过去，当前和将来可能发生的状态变化的知识...用Redux开发的应用程序易于测试，并且可以在表现出一致行为的不同环境中运行。 37. Redux遵循的三个原则是什么？单一事实来源：整个应用程序的状态存储在单个存储中的对象/状态树中。...38.您对“唯一的真理源”了解那些？ Redux使用“存储”将应用程序的整个状态存储在一个地方。因此，所有组件的状态都存储在商店中，它们从商店本身接收更新。...如果不需要完成任何工作，它将按原样返回以前的状态。 43.在Redux中存储的意义是什么？...Flux Redux 1.存储包含状态和更改逻辑 1.存储和更改逻辑是分开的 2.有多家商店 2.只有一家商店 3.所有商店都断开连接并保持平坦 3.带有分层减速器的单店 4.有单身派遣员 4.没有调度员的概念

11.2K3 0

Rematch: Redux 的重新设计

让我们看看使用React等基于组件的视图框架/库时的选项： 1. Component State (组件状态) 存在于单个组件内部的状态。在React中，通过setState方法更新state。...Provided State (供给状态) 状态保存在根 provider (提供者) 组件中，并由 consumer (消费者) 在组件树的某个地方访问，而不考虑组件之间的层级关系。...在 React 中，通过 context API 可以实现。大多数的状态都是存在于视图中的，因为它是用来反映用户界面的。那么，对于反映底层数据和逻辑的其它状态，又属于谁呢？...将所有内容都放在视图中可能会导致关注点的分离:它将与javascript视图库联系在一起，使代码更难测试，而且可能最大的麻烦是:必须不断地思考和调整存储状态的位置。...2.effect action：触发异步 action，这可能会调用reducer操作，但异步函数不会直接更改任何状态。

1.6K5 0

React进阶(1)-理解Redux

在Redux中,要求把组件的数据放到公共的存储仓库(区域)当中,让组件尽可能的减少状态数据存储,换而言之,所有组件自身内部状态数据都不放在state里面了,把它放到Store这样的一个存储仓库当中去其实本质上来说...(Redux的工作流) 上面的Redux工作流图中,以中间为准:包括了Store,ReactComponents,Actions Creators,以及Reducers 其中Store代表的就是负责组件存储所有公共状态的数据...的状态,必须要通过派发(dispatch)一个action对象去完成然后组件渲染的对应的界面要更改的话,实际更改的就是组件的状态,如果状态都是只能读不能修改的话,那么界面就不会更新变化了想要更改用户界面的渲染...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装组件数据的改变只能通过纯函数完成所谓的纯函数,就是指...中的reduce函数只负责计算组件的状态,却不负责存储组件的状态在Reducer函数中往往包含action.type为判断条件的if-else或者switch语句,根据action,总是返回一个新的状态

1.2K2 0

必须要会的 50 个React 面试题（下）

使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。 37. Redux遵循的三个原则是什么？单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。...Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。...Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。...因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。 44....Redux与Flux有何不同？ Flux Redux 1. Store 包含状态和更改逻辑 1. Store 和更改逻辑是分开的 2. 有多个 Store 2. 只有一个 Store 3.

3.5K2 1

React进阶(1)-理解Redux

在Redux中,要求把组件的数据放到公共的存储仓库(区域)当中,让组件尽可能的减少状态数据存储,换而言之,所有组件自身内部状态数据都不放在state里面了,把它放到Store这样的一个存储仓库当中去...的工作流程了,下面这个流程图对于理解Redux很重要先附上一张Redux工作流的流程图:以后会在代码中逐步的体现上面的Redux工作流图中,以中间为准:包括了Store,ReactComponents...的状态,必须要通过派发(dispatch)一个action对象去完成然后组件渲染的对应的界面要更改的话,实际更改的就是组件的状态,如果状态都是只能读不能修改的话,那么界面就不会更新变化了想要更改用户界面的渲染...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装组件数据的改变只能通过纯函数完成所谓的纯函数,就是指...中的reduce函数只负责计算组件的状态,却不负责存储组件的状态在Reducer函数中往往包含action.type为判断条件的if-else或者switch语句,根据action,总是返回一个新的状态

1.5K2 2

设计师都能懂的 Redux 指南

请不要用 Google 搜索花哨的后端的东西我听说过它，但我不知道它是什么，这可能是一个 React 框架是一种在 React 应用中存储管理状态的更好方式这个问题，我问过 40 多位设计师，以上是他们的经典回答...获取和存储数据在React中，我们将UI分解为组件。这些组件都可以分解为更小的组件。...组件通常从 store 中获取数据，而不是其他地方。这使得 UI 保持高度统一。将数据绑定到 UI 元素如果单单使用 React 的话，实际上有一种更好的方法来获取和存储数据。...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。更改数据的代码必须像数学公式一样。在相同输入的情况下，它必须返回相同的结果。...当从服务器收到否定结果时，可以轻松记录，重放和还原数据更改。持久化和从状态启动 Redux 可以很容易地将应用程序中发生的事情保存到本地存储中。

1.7K1 0

从设计的角度看 Redux

请不要用 Google 搜索花哨的后端的东西我听说过它，但我不知道它是什么，这可能是一个 React 框架是一种在 React 应用中存储管理状态的更好方式这个问题，我问过 40 多位设计师，以上是他们的经典回答...获取和存储数据在React中，我们将UI分解为组件。这些组件都可以分解为更小的组件。...组件通常从 store 中获取数据，而不是其他地方。这使得 UI 保持高度统一。 ? 将数据绑定到 UI 元素如果单单使用 React 的话，实际上有一种更好的方法来获取和存储数据。...在 Redux 的术语中这称之为 “派发 (dispatching) 动作”。更改数据的代码必须像数学公式一样。在相同输入的情况下，它必须返回相同的结果。...当从服务器收到否定结果时，可以轻松记录，重放和还原数据更改。持久化和从状态启动 Redux 可以很容易地将应用程序中发生的事情保存到本地存储中。

1.7K3 0

如何创建可扩展和可维护的前端架构

但更复杂的代码可以存放于 lib 目录中。处理模式或图的工作（例如检查有向图中的循环的算法）也不例外。很多人都使用 CSS-in-JS 或样式组件之类的东西，但是我更喜欢普通的 CSS。为什么呢？...在我们的前端应用中，应用层是我们的核心，所以我们首先讨论它。应用层由两部分组成：存储和客户端 API。存储是我们的全局应用状态。这个状态保存着不同模块在同一时间可以存取的数据。...即使在屏幕上不需要这些数据，它也会持续存在于存储中。正如你所看到的，每一个发送到存储的更新请求都可以通过一连串的逻辑。这就是我们所说的中间件。这是 Redux 中使用的一种模式。...中间件的一个简单例子是记录存储的传入请求。有时候，需要通过外部服务中的数据对存储的传入请求进行增强。在 Redux 中，我们使用 Promise 处理这个调用。...对于更加复杂的 API 客户端，我们可以通过中间件修改所有发出的请求（例如，添加认证头）。响应可以由后件修改（比如更改数据结构）。更改响应之后，我们将其存储在客户端的缓存中，这就像应用存储一样。

1.7K2 0

【架构】1131- 如何创建可扩展和可维护的前端架构

但更复杂的代码可以存放于 lib 目录中。处理模式或图的工作（例如检查有向图中的循环的算法）也不例外。很多人都使用 CSS-in-JS 或样式组件之类的东西，但是我更喜欢普通的 CSS。为什么呢？...在我们的前端应用中，应用层是我们的核心，所以我们首先讨论它。应用层由两部分组成：存储和客户端 API。存储是我们的全局应用状态。这个状态保存着不同模块在同一时间可以存取的数据。...即使在屏幕上不需要这些数据，它也会持续存在于存储中。正如你所看到的，每一个发送到存储的更新请求都可以通过一连串的逻辑。这就是我们所说的中间件。这是 Redux 中使用的一种模式。...中间件的一个简单例子是记录存储的传入请求。有时候，需要通过外部服务中的数据对存储的传入请求进行增强。在 Redux 中，我们使用 Promise 处理这个调用。...对于更加复杂的 API 客户端，我们可以通过中间件修改所有发出的请求（例如，添加认证头）。响应可以由后件修改（比如更改数据结构）。更改响应之后，我们将其存储在客户端的缓存中，这就像应用存储一样。

8493 0

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

前言在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新...在reducer函数接收的第二个参数action就是接下来要干的事情了在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具当然安装这个插件...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作 ...,Vue中也有vuex这样的数据流管理框架,使用起来也是大同小异,两个各有优点,都很强使用React编写代码更偏向底层一些的,虽然Redux比较绕,但都是有固定的套路流程的,其中理解Redux的工作流程是非常重要的...主要开始用ant-design这个UI组件库对todolist做了一个简单的布局,然后如何将组件的数据抽离到Redux中去管理组件如何获取Redux中store的数据,以及怎么更新store的数据的更新

2.6K3 0

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的容器组件...(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer纯函数中初始化),同时还需要监听store...的状态改变(通过store触发subscribe函数),当组件需要更改store状态时,需要通过dispatch派发action对象,然后在Reducer纯函数里面根据state以及action,返回最新的...,让每个组件只专注的做自己的事情例如:在我们上几节代码中的Todolist的代码中,尽管我们把数据已经抽离放到store当中进行存储了的,但是依旧有许多逻辑,组件的渲染都杂糅在一个文件当中的如下代码所示...(外部组件与内部组件),在组件当中调用的地方位置处,可以视它为子(内部)组件,父子组件只是一个相对的概念,把承担负责和redux中store打交道的组件称为父组件(外层),也叫做容器组件(聪明组件),它干的事情比较多

1.5K0 0

手摸手教你基于Hooks 的 Redux 实战姿势

Redux 使您可以集中存放 JavaScript 应用程序的状态（数据）它最常与 React 一起使用（通过 react-redux ）这使您可以从树中的任何组件访问或更改状态。 ? 2....selector 只是一个有趣的词：“从 store 获取数据的功能” 然后，向 useSelector 中传入回调，该回调中可获取整个 redux 的状态，您只需选择该组件所需的内容 ?...不要在 reducer 中修改 state 中的值，仅返回一个值已经更改的拥有新状态的对象。 ? 9....所有连接的组件（调用 useSelector ）将自动获得新的状态就像 props 或者 state 改变一样 - useSelector 将自动检测更改，React 将重新渲染组件。...总结 Redux 可以以更复杂的方式使用，但核心始终是： •1、向 store 发送 action•2、通过 reducer 可能会或可能不会改变状态•3、使用选择器访问状态•4、状态的改变将自动重新刷新您的应用

1.5K2 0

Redux从设计到源码

如上图，Store是Redux中的状态容器，它里面存储着所有的状态数据，每个状态都跟一个视图一一对应。 Redux也规定，一个State对应一个View。...与传统增删改查关系式存储的区别：传统的增删是以结果为导向的数据存储，ES是以过程为导向存储。 CRUD是直接对库进行操作。 ES是在库里存了一系列事件的集合，不直接对库里记录进行更改。...优点：高性能：事件是不可更改的，存储的时候并且只做插入操作，也可以设计成独立、简单的对象。所以存储事件的成本较低且效率较高，扩展起来也非常方便。...简化存储：事件用于描述系统内发生的事情，我们可以考虑用事件存储代替复杂的关系存储。溯源：正因为事件是不可更改的，并且记录了所有系统内发生的事情，我们能用它来跟踪问题、重现错误，甚至做备份和还原。...CQRS与Flux 相同：当数据在write side发生更改时，一个更新事件会被推送到read side，通过绑定事件的回调，read side得知数据已更新，可以选择是否重新读取数据。

1.4K6 0

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

撰文 | 川川前言在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作...(reducer) 真正的新老房信息的变更操作都是在reducer这个函数中完成的,并且它是一个纯函数,必须要有返回值在Reducer函数中,接收两个参数,第一个是上一次组件的状态值,而第二个是组件具体的动作...,竟然这么多代码,使用vue的话,几行代码就搞定了,Vue中也有vuex这样的数据流管理框架,使用起来也是大同小异,两个各有优点,都很强使用React编写代码更偏向底层一些的,虽然Redux比较绕,但都是有固定的套路流程的...,其中理解Redux的工作流程是非常重要的主要开始用ant-design这个UI组件库对todolist做了一个简单的布局,然后如何将组件的数据抽离到Redux中去管理组件如何获取Redux中store

2.2K2 0

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 · 正...· 文 · 来 · 啦 · ♚ 容器组件(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer...纯函数中初始化),同时还需要监听store的状态改变(通过store触发subscribe函数),当组件需要更改store状态时,需要通过dispatch派发action对象,然后在Reducer纯函数里面根据...,那么就可以把组件拆分成若干粒度的小组件的,让每个组件只专注的做自己的事情例如:在我们上几节代码中的Todolist的代码中,尽管我们把数据已经抽离放到store当中进行存储了的,但是依旧有许多逻辑...(外部组件与内部组件),在组件当中调用的地方位置处,可以视它为子(内部)组件,父子组件只是一个相对的概念,把承担负责和redux中store打交道的组件称为父组件(外层),也叫做容器组件(聪明组件),它干的事情比较多

9641 0

理解JavaScript数组方法：Map vs Filter vs Redux

array（可选）：调用filter的数组。示例：唯一数据源：整个应用程序的状态存储在单个存储对象树中。状态是只读的：更改状态的唯一方法是发出一个动作，即描述发生了什么的对象。...使用纯函数进行更改：为了指定状态树如何被动作转换，您编写纯函数的规约。用法：Redux通常用于更大型的应用程序，其中管理状态变得复杂。...它提供了一个集中式存储，保存了整个应用程序的状态，使得更容易在不同组件之间访问和更新状态。Redux通常与React一起使用，但也可以与任何JavaScript框架或库一起使用。...用法：map和filter在组件内部用于本地转换或过滤数据，而Redux用于全局管理跨组件的状态。...影响：Redux对应用程序架构有更广泛的影响，提供了一个集中式存储并强制执行单向数据流，而map和filter主要影响如何在单个组件中处理数据。

1660 0

Redux 快速上手指南

Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。...在简单的应用程序中，这沟通方式还可行，但如果是在有复杂的组件嵌套阶层结构时，例如层级很多或是不同树状结构中的子组件要互相沟通时，这个作法是派不上用场的。...这两者组合在一起，就是称之为"应用程序领域的状态"，为了区分组件中的状态(state)，这个作为应用程序领域的持久性数据集合，会被称为store(存储)。...payload - 用于更新状态的数据。创建一个Redux存储区，它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问，但只能通过提供的reducer进行更新。...现在，我们的cartReducer什么也没做，但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作(action)。

1.3K2 0

Vuex 4 指南，使用 Vue3 的需要看看！

然而，有人抱怨一个恼人的问题:通知栏偶尔会给出错误的通知。用户被通知有一条新的未读消息，但当他们查看时，它只是一条已经被看过的消息。...但是不能更改 store 中的数据，至少不能直接更改。取而代之的是，它们必须告知 store 要更改数据的意图，store由负责通过一组定义的功能（称为mutation）进行更改。...如果我们集中数据更改逻辑，那么在状态不一致的情况下，我们只需要在同一地方排查就行了，不用到具体的每个文件中。我们将某些随机组件（可能在第三方模块中）以意外方式更改数据的可能性降至最低。...可以记录提交并观察状态如何变化(在使用Vue Devtools 时确实可以这样做)。但如果我们的mutation被异步调用，这种能力就会被削弱。我们知道提交的顺序，但我们不知道组件提交它们的顺序。...由于它和TodoNew组件都需要访问相同的数据，因此这是我们在 Vuex 存储中保存的全局state 的理想选择。现在，回到state并定义属性状态。

1.5K1 0

React 入门学习（十四）-- redux 基本使用

，我们现在开始学习了 Redux ，在我们之前写的案例当中，例如：todolist 案例，GitHub 搜索案例当中，我们对于状态的管理，都是通过 state 来实现的，比如，我们在给兄弟组件传递数据时...简单理解就是复杂从组件角度去考虑的话，当我们有以下的应用场景时，我们可以尝试采用 Redux 来实现某个组件的状态需要共享时一个组件需要改变其他组件的状态时一个组件需要改变全局的状态时除此之外...对象时，会将先前的 state 与传来的 action 一同发送给 reducer ，reducer 在接收到数据后，进行数据的更改，返回一个新的状态给 store ，最后由 store 更改 state...获取当前时刻的 store ，我们可以采用 getStore 方法 const state = store.getState(); 在前面我们的流程图中，我们需要通过 store 中的 dispatch...Redux 三大原则理解好 Redux 有助于我们更好的理解接下来的 React -Redux 第一个原则单向数据流：整个 Redux 中，数据流向是单向的 UI 组件 —> action —> store

4792 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭