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

组件在从状态中删除对象后没有重新加载,我使用的是React-redux

在React-redux中,当组件从状态中删除对象后,组件不会自动重新加载。这是因为React-redux使用了浅比较来检测状态的变化,只有当状态的引用发生变化时,组件才会重新渲染。

如果你想在删除对象后重新加载组件,可以采取以下几种方法:

  1. 使用浅拷贝:在删除对象后,对状态进行浅拷贝,以创建一个新的状态对象。这样,状态的引用会发生变化,触发组件重新渲染。例如:
代码语言:txt
复制
const newState = { ...prevState };
delete newState.objectToDelete;
setState(newState);
  1. 使用深拷贝:在删除对象后,对状态进行深拷贝,以创建一个新的状态对象。这样,无论状态的哪个部分发生变化,都会触发组件重新渲染。可以使用第三方库如lodashcloneDeep方法来进行深拷贝。
代码语言:txt
复制
import cloneDeep from 'lodash/cloneDeep';

const newState = cloneDeep(prevState);
delete newState.objectToDelete;
setState(newState);
  1. 使用Redux的中间件:如果你使用了Redux的中间件,可以在删除对象后,手动触发一个action来更新状态。在action中,可以通过传递一个新的状态对象来触发组件重新渲染。
代码语言:txt
复制
const deleteObject = () => {
  // 删除对象的逻辑
  // ...

  // 触发一个action来更新状态
  dispatch({ type: 'DELETE_OBJECT', payload: newState });
}

以上是一些常见的方法,可以根据具体情况选择适合的方式来重新加载组件。关于React-redux的更多信息和使用方法,你可以参考腾讯云的产品文档:React-Redux

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

相关·内容

学习react-redux,看这篇文章就够啦!

# react-redux React Redux Redux 官方提供一个库,专门用于在 React 应用中集成和操作 Redux 状态 # 组件划分 react-redux组件划分两类,...只负责 UI 呈现,不带有任何业务逻辑 没有状态(即不使用 this.state 这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux API 下面就是一个 UI 组件例子...在组件内部,我们通过映射关系 props,可以获取到 state 数据。 mapStateProps 会订阅 Store ,每当 store 更新时,会重新计算 UI 组件参数,重新渲染组件。...使用该钩子可以避免在组件订阅整个状态树,提供了更好性能。...在 React Redux ,如果你想在组件挂载执行异步操作或订阅状态变化,可以使用该钩子函数。

23620

React-reduxRedux存在问题(解决方案)?Redux最佳实践?Redux实现浅析?

接下来记录个人在学习Redux时一些杂七杂八~ Redux是什么?...核心概念   1.Redux使用普通对象来描述state,这个对象就是Modal。 ?   2.要想更新 state 数据,你需要发起一个 action。...reducer纯函数,没有副作用。 了解到这些,其实已经多少能明白Redux is a predictable state container for JavaScript apps....为什么选择react-redux react-redux官方提供绑定库,由redux开发者维护,可以很好与redux保持同步。 它鼓励组件分离。...粗暴地、级联式刷新视图(使用react-redux优化)。 分型。原生 Redux-react 没有分形结构,中心化 store; Redux最佳实践?

1.5K10

深入Redux架构

多交互、多数据源场景就比较适合使用Redux。 设计思想: Web 应用是一个状态机,视图与状态一一对应。 所有的状态,保存在一个对象里面。 Redux工作流程: 首先,用户发出 Action。...如果使用 React,这时可以触发重新渲染 View。...操作开始时,送出一个 Action,触发 State 更新为"正在操作"状态,View 重新渲染 操作结束,再送出一个 Action,触发 State 更新为"操作结束"状态,View 再一次重新渲染...只负责 UI 呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux API 下面就是一个 UI 组件例子...作为参数,如果容器组件参数发生变化,也会引发 UI 组件重新渲染。

2.2K60

Redux 包教包会(一):解救 React 状态危机

我们在组件 B 中发起一个更新状态 C 动作,此动作对应更新函数更新 Store 状态树,之后将更新状态 C 传递给组件 C,触发组件 C 重新渲染。...对象状态树,然后所有的状态改变都是通过修改这一状态树,进而将修改状态传给相应组件并触发重新渲染来完成我们目的。...一个 Action 就是一个简单 JavaScript 对象: { type: 'ADD_TODO', text: '一只小小小图雀' } 我们可以看到一个 action 包含动作类型,以及更新状态需要数据...可以看到我们删除了 nextTodoId ,因为我们已经在 src/actions/index.js 重新定义了它;接着我们删除了 onSubmit 方法;最后我们删除了传递给 AddTodo 组件...当我们使用了 dispatch(action) 之后,传递给子组件,用来修改父组件 State 方法就不需要了,所以我们在代码删除了它们。

1.8K20

React全家桶简介

当前前端开发已经进入以vue、react、webpack为代表编程2.0时代。在1.0时代,代码写给机器;在2.0时代,代码写给工具,然后由工具处理再转给机器。...Action 一个对象。...this.state 组件免不了要与用户互动,React 一大创新,就是将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。...LikeButton 组件,它 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。...关于组件生命周期 组件生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数

2K10

React进阶(6)-react-redux使用

等),使用它可以更好组织和管理我们代码,遵循一定组件拆分规范,在React更方便使用Redux 关系: 它不是必须,在实际项目中,可选用.使用Redux还是使用react-redux,取决于你自己...package.json查看是否有的 对于理解 react-redux Provider和 connect,有必要再次回顾一下之前学过UI组件和容器组件 UI组件(傻瓜组件/无状态组件) react-redux..., 没有状态,UI渲染通过外部props传入(即不使用this.state这个变量) 所有数据都由参数(this.props)对象提供 不使用任何 Redux API 如下所示, UI 组件例子...:当你使用React-Router 路由库时,与其他项目没有不同之处,也是使用Provider在Router外面包一层,因为Provider唯一功能就是传入store对象 如果不这样包裹着:内部组件时接收不到...: boolean, } 结语 本文主要学习了如何使用 react-redux,使用 react-redux只是为了简化Redux,不使用react-redux没有问题,只是使用react-redux

2K10

react-redux入门教程

React-Redux起源 React实际上只是UI框架,通过 JSX 生成动态 dom 渲染 UI,没有架构、没有模板、没有设计模式、没有路由、也没有数据管理。...因为搞React用Redux的人很多,为了方便使用,Redux 作者封装了一个 React 专用React-Redux UI组件 React-Redux 将所有组件分成两大类:UI 组件(presentational...UI组件特征 只负责 UI 呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux API 下面就是一个...容器组件 容器组件特征 负责管理数据和业务逻辑,不负责 UI 呈现 带有内部状态 使用 Redux API React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux...,就会自动执行,重新计算UI组件参数,从而触发UI组件重新渲染。

1.2K30

React总结概括

setState会自动调用render函数,触发视图重新渲染,如果仅仅只是state数据变化而没有调用setState,并不会触发更新。...2、getInitialState() 在使用es6class语法时没有这个钩子函数,可以直接在constructor定义this.state。此时可以访问this.props。...第一次做react项目的时候并没有用redux,所有的逻辑都是在组件内部实现,当时为了实现一个逻辑比较复杂购物车,洋洋洒洒居然写了800多行代码,回头一看我自己都不知道写啥,画面太感人。...值得注意connect,Provider,mapStateToProps,mapDispatchToPropsreact-redux提供,redux本身和react没有半毛钱关系,它只是数据处理中心...,没有和react产生任何耦合,react-redux让它们联系在一起。

1.2K20

ReactReactNative 状态管理: redux 如何使用

参数先前状态 state 和要执行行为 action,根据 action type 行为类型,返回不同数据。 需要注意,reducer 不能修改老数据,只能新建一个数据。...我们使用使用 react-redux Provider 包围了 App 组件,这样整个 App 组件都可以获取到 Store 状态和行为处理函数。...(即state对象)如何转换为 UI 组件参数 //mapStateToProps会订阅 Store,每当state更新时候,就会自动执行,重新计算 UI 组件参数,从而触发 UI 组件重新渲染...第二个参数 mapDispatchToProps 用于返回当前 UI 组件需要向外分发状态操作行为,这里我们需要分发两个行为:添加 todo 和删除 todo,通过调用第二步创建 DISPATCH_ADD_TODO...store 通过 react-redux Provider 包裹整个 app 组件,把 store 分发给所有组件 最重要一步:在 UI 组件里获取数据和分发行为 使用 react-redux

1.3K20

俺好像看懂了公司前端代码

大家好,前端开发者卜壮,经过笔者上篇《俺咋能看懂公司前端项目?》之后,不知道大家有没有学到其设计思想并应用到自己项目中。相信你们,肯定没有。 趁着头发茂密,让我们步入正题!...首先先了解一下前端管理后台接口架构设计流程,技术选型后端要使用Swagger接口管理,前端React使用Redux状态管理,React-redux状态映射组件Props,Redux-thunk支持异步管理状态...这三步是为了设置接口请求loading状态,通过loading状态来处理页面的加载效果,省去在组件自定义逻辑判断。下图为每个接口在action函数数据处理。..., 将接口请求状态数据映射到组件props。...我们这里需要自己封装一个高阶组件,里面调用react-redux提供connect函数将state和dispatch映射到组件props,此外还需要定义两个函数映射到props,一个用于调用接口函数

1.3K10

React进阶(6)-react-redux使用

,遵循一定组件拆分规范,在React更方便使用Redux 关系: 它不是必须,在实际项目中,可选用.使用Redux还是使用react-redux,取决于你自己,项目组成员熟悉程度,适合自己才是最好...方式下载 npm install --save react-redux或yarn add react-redux 安装完成,可以在根目录package.json查看是否有的 对于理解 react-redux... Provider和 connect,有必要再次回顾一下之前学过UI组件和容器组件 UI组件(傻瓜组件/无状态组件) 既然一个第三方模块,那么可以通过npm或者yarn方式下载 react-redux..., 没有状态,UI渲染通过外部props传入(即不使用this.state这个变量) 所有数据都由参数(this.props)对象提供 不使用任何 Redux API 如下所示, UI 组件例子...: boolean,} 结语 本文主要学习了如何使用 react-redux,使用 react-redux只是为了简化Redux,不使用react-redux没有问题,只是使用react-redux

2.2K00

React教程(详细版)

构造函数this永远指向该组件实例对象,所以=右侧意思就是该组件实例对象自身此时还没有该方法,他就会去原型对象上看有没有,显然这里有的,然后调用bind方法,该方法做两件事,一、创建一个新函数...;二、函数内this指向bing()括号传入,显然这里组件实例对象;右侧执行完,将该方法赋值给了实例对象本身一个方法名(changeWeather),这样实例对象本身就有一个changeWeather...他会去他外部找this,那此时外部this就是组件实例对象 总结: state组件实例对象最重要属性,必须对象形式 组件被称为状态机,通过更改state值来达到更新页面显示(重新渲染组件...props 因为函数组件没有组件实例对象,所以其他两个state和refs没有的,只有props属性可用,直接在()接受props对象即可,函数内部就可以结构使用props值了 总结:...、react-redux基本使用 11.2、纯函数 11.3、react-redux开发者工具 打开chrome网上商店,下载开发者工具Redux DevTools 下载完右上方插件图标还是不会亮

1.7K20

Dapp 前端工具: Drizzle Store

现在告诉你,你来对地方了,Drizzle 库正好你现在所需要。我们来看看它是怎么工作,怎么用它来构建 dapp 前端。 什么 drizzle store?它是怎么工作?...如果一个新区块被广播,合约对象synced属性会被设为 false,表示合约准备同步,当合约被同步,synced属性设为 true(所有合约已经重新调用) 当初始化合约时,通过 web3 实例构建...如果syncAlways设为 fase,并且如果保存任一合约与区块现存某个交易有关,那么所有相关合约调用都会重新执行。 drizzleStatus :包含 drizzle 状态信息对象。...web3 :包含 web3 实例状态对象。...当你第一次创建 drizzle 实例时,构造函数会如下开展: 首先为构造函数提供选项会与默认选项合并,这意味着如果在默认选项没有定义值,则会使用默认值 默认选项如下: web3: { fallback

1.3K20

【小狮子前端】「Redux」概念理解+实战上手(内含大量实例)

官网实例(todo) State: 用了一个普通对象描述应用State,没有setter(修改器方法) { todos: [{ text: 'Eat food', completed...四、react-redux 可以看到上面我们并没有使用react-redux,虽然能实现功能,但细心会发现直接拿store,组件多的话个个拿store,这样不好。...好处,所有组件都可以在react-redux控制之下,所有组件都能访问到Redux数据。...useEffect一样,如果不提供第二个参数,每次组件更新就会重新计算 那可能会存在一些担忧,会不会新没有之前用mapStateToProps好用呢?...对于一些场景需求hooks没法解决: 需要保存或者加载状态组件共享状态 需要与其他组件共享业务逻辑或数据处理过程 配合hooks新redux带来不一样改变:通过使用useSelector、useDispatch

1.3K00

Redux 入门教程(三):React-Redux 用法

为了方便使用,Redux 作者封装了一个 React 专用React-Redux,本文主要介绍它。 这个库可以选用。...实际项目中,你应该权衡一下,直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,但是需要掌握额外 API,并且要遵守它组件拆分规范。 ?...只负责 UI 呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量) 所有数据都由参数(this.props)提供 不使用任何 Redux API 下面就是一个 UI 组件例子...作为参数,如果容器组件参数发生变化,也会引发 UI 组件重新渲染。...八、React-Router 路由库 使用React-Router项目,与其他项目没有不同之处,也是使用Provider在Router外面包一层,毕竟Provider唯一功能就是传入store对象

1.6K50

Redux with Hooks

按照官网介绍,Hooks带来好处有很多,其中让感受最深主要有这几点: 函数式组件相比class组件通常可以精简不少代码。 没有生命周期束缚,一些相互关联逻辑不用被强行分割。...其返回值会作为useSelector返回值,但与mapStateToProps不同,前者可以返回任何类型值(而不止一个对象),此外没有第二个参数ownProps(因为可以在组件内通过闭包拿到)...两者用法相近,但如果你想后者像前者一样返回一个对象的话要特别注意: 由于useSelector内部默认使用===来判断前后两次selector函数计算结果是否相同(如果不相同就会触发组件re-render...),那么如果selector函数返回对象,那实际上每次useSelector执行时调用它都会产生一个新对象,这就会造成组件无意义re-render。...此外,使用Hooks自建全局状态管理方式在小项目中固然可行,然而想用在较大型、正式业务,至少还要花费心思解决性能问题,而这个问题正是React-Redux等工具已经花费不少功夫帮我们解决了,似乎并没有什么充分理由要抛弃它们

3.3K60

【React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

(即:页面地址跳转都是在浏览器端实现,不会去重新请求服务端获取 html,html 只是在应用初始化时候加载一次。)...:node服务器端路由,valuefunction,用于处理客户端提交请求并返回一个响应数据 前台路由:浏览器端路由,valuecomponent,当请求路由path时,浏览器端没有发送http...JS库,不是React插件库 它可以用在react,angular,vue等项目中,但基本与react配合使用 作用:集中式管理react应用多个组件共享状态。...什么情况需要redux: 某个组件状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件状态 使用 一个规定套路。需要多写几遍。...: 使用Provider组件对dispatch、subscribe、getState…进行全局管理 React-Redux 将所有组件分为两大类 UI组件 只负责UI呈现,不带有任何业务逻辑

22530

单向数据流-从共享状态管理:fluxreduxvuex漫谈异步数据处理

比如一个组件需要使用另一个组件状态,或者一个组件需要改变另一个组件状态,都是共享状态。...父子组件之间,兄弟组件之间共享状态,往往需要写很多没有必要代码,比如把状态提升到父组件里,或者给兄弟组件写一个父组件,听听就觉得挺啰嗦。...reducer 不存储 state, reducer 函数逻辑不应该直接改变 state 对象, 而是返回新 state 对象(可以考虑使用 immutable-js)。...React-Redux vs VUEX 对比分析 和组件结合方式差异 通过VUEX全局插件使用,结合将store传入根实例过程,就可以使得store对象在运行时存在于任何vue组件。...这样看来认为VUE更推荐在使用了VUEX框架每个组件内部都使用store,而React-Redux则提供了自由选择性。

3.6K40
领券