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

react-redux connect()函数mapStateToProps正在更新,但组件未重新呈现

在React-Redux中,connect()函数是用于将React组件连接到Redux store的高阶函数。它接受两个参数:mapStateToProps和mapDispatchToProps。

mapStateToProps是一个函数,它定义了组件如何从Redux store中获取所需的state数据。它接收一个state参数,表示整个Redux store的状态树,然后返回一个对象,该对象包含组件所需的state属性。通过在connect()函数中传递mapStateToProps,组件可以订阅Redux store的更新,并在state发生变化时重新渲染。

当mapStateToProps正在更新时,但组件未重新呈现,可能有以下几个原因:

  1. mapStateToProps返回的对象没有发生变化:如果返回的对象与前一个状态相同,React不会重新渲染组件。确保返回的对象是新的,或者使用浅比较来确保对象的变化。
  2. 组件的shouldComponentUpdate()方法返回false:如果组件的shouldComponentUpdate()方法返回false,React将不会重新渲染组件。确保shouldComponentUpdate()方法正确地处理了mapStateToProps的更新。
  3. 组件的props没有发生变化:如果组件的props没有发生变化,React将不会重新渲染组件。确保组件的props在mapStateToProps的更新后发生了变化。

推荐的腾讯云相关产品和产品介绍链接地址:

  1. 云服务器(CVM):提供可扩展的计算能力,满足各种业务需求。详情请参考:https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):高性能、可扩展的关系型数据库服务,适用于各种规模的应用。详情请参考:https://cloud.tencent.com/product/cdb_mysql
  3. 云原生容器服务(TKE):基于Kubernetes的容器管理服务,帮助用户快速构建、部署和管理容器化应用。详情请参考:https://cloud.tencent.com/product/tke

请注意,以上推荐的产品仅代表腾讯云的一部分云计算产品,更多产品和服务请参考腾讯云官方网站。

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

相关·内容

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

前言 撰文:川川 您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...,而圆括号内又接收一个参数,即是UI组件,也是傻瓜组件 有两次 connect的执行,第一次 connect函数的执行是从react-redux库中引入这个方法,第二次是把 connect函数返回的函数再次执行...所以,connect的两个API如下所示: import { connect } from 'react-redux' const VisibleTodoList = connect(mapStateToProps...mapStateToProps会订阅 Store,每当 state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件重新渲染。...connectreact-redux库提供的一个函数,用于连接UI组件的,并且最终生成一个容器组件,提供了一些映射方法,mapStateToProps以及mapDispatchToProps 在UI

2K10

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

image.png 前言 您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...,而圆括号内又接收一个参数,即是UI组件,也是傻瓜组件 有两次 connect的执行,第一次 connect函数的执行是从react-redux库中引入这个方法,第二次是把 connect函数返回的函数再次执行...所以,connect的两个API如下所示: import { connect } from 'react-redux'const VisibleTodoList = connect(mapStateToProps...mapStateToProps会订阅 Store,每当 state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件重新渲染。...connectreact-redux库提供的一个函数,用于连接UI组件的,并且最终生成一个容器组件,提供了一些映射方法,mapStateToProps以及mapDispatchToProps 在UI

2.2K00

深入Redux架构

操作开始时,送出一个 Action,触发 State 更新为"正在操作"状态,View 重新渲染 操作结束后,再送出一个 Action,触发 State 更新为"操作结束"状态,View 再一次重新渲染...connect() React-Redux 提供connect方法,用于从 UI 组件生成容器组件connect的意思,就是将这两种组件连起来。 connect方法的完整 API 如下。...import { connect } from 'react-redux' const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps...Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件重新渲染。...connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件更新

2.2K60

手写一个React-Redux,玩转React的Context API

上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库。...这个库的作用是将Redux的状态机和React的UI呈现绑定在一起,当你dispatch action改变state的时候,会自动更新页面。...( mapStateToProps, mapDispatchToProps )(Counter) 复制代码 上面代码可以看到connect是一个高阶函数,他的第一阶会接收mapStateToProps...props拿到,connect的第二阶接收的参数是一个组件,我们可以猜测这个函数的作用就是将前面自定义的state和方法注入到这个组件里面,同时要返回一个新的组件给外部调用,所以connect其实也是一个高阶组件.../Context'; // 第一层函数接收mapStateToProps和mapDispatchToProps function connect(mapStateToProps, mapDispatchToProps

3.7K21

Redux with Hooks

问题 我们先来看一段使用了Hooks的函数组件结合React-Redux connect的用法: import React, { useEffect } from 'react'; import {...memorized版本,只要依赖项不变,memorized的函数就不会更新。...然而正如前文提到的,mapStateToProps中的ownProps参数同样会引起mapStateToProps重新调用,产生新的state props: // 此函数在connected组件接收到...其返回值会作为useSelector的返回值,mapStateToProps不同的是,前者可以返回任何类型的值(而不止是一个对象),此外没有第二个参数ownProps(因为可以在组件内通过闭包拿到)...两者的用法相近,如果你想后者像前者一样返回一个对象的话要特别注意: 由于useSelector内部默认是使用===来判断前后两次selector函数的计算结果是否相同的(如果不相同就会触发组件re-render

3.3K60

React性能优化三篇之三

React-Redux是官方的React和Redux链接工具 Provider 一个很简单的React组件,它主要的作用是把store放到context中,connect就可以获取store,使用store...connect 一个柯里化函数函数将被调用两次。第一次是设置参数,第二次是组件与 Redux store 连接。...因为被连接的组件在Redux的state改变后会更新,大范围的更新对性能不友好,而且其中有些组件可能是没必要更新也会更新,所以要尽量拆分、细化,connect仅仅要更新store或依赖store的state...,每次更新重新计算可能会带来性能问题。...总结 谨慎使用context中的store 被connect组件更新的时候影响范围尽量小,避免不必要更新 使用Resselect避免不必要的selector计算 参考 React-Redux Reselect

85120

redux&react-redux

react-redux目录 containers 用来放置容器组件和UI组件(直接将UI组件和容器组件写入一个jsx文件即可) 概念 UI组件:不能使用任何redux的api,只负责页面的呈现,交互等...容器组件:负责和redux通信,将结果交给UI组件 api Provider : 无需自己给容器组件传递store,给根组件包裹一个 即可 connect:生成一个容器组件,并暴露 //简写 mapStateToProps...(state){} mapDispatchToProps(dispatch){} connect(mapStateToProps,mapDispatchToProps)(UI组件) //mapStateToprops...UI组件合并到一个文件 引入connect 引入actions中的需要用到的回调 导出connect(映射状态---mapStateToprops(state),映射操作状态的方法--mapDispatchToProps...配置函数导出 书写流程规模化 这些是固定流程的处理(只用写一次) redux配置有些只用写一次的就直接提炼出来,每次直接拖入文件即可 react-redux:index文件引入Provider

9310

ReactReactNative 状态管理: redux 如何使用

ReduxTodoApp 是下一步要创建的 UI 组件 创建 UI 组件: import {useState} from "react"; import { connect } from "react-redux...//mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件重新渲染。...connect 的第一个参数 mapStateToProps 用于返回当前 UI 组件需要的数据,这里我们获取到 Store 中的 todos 列表。...这样,我们的 UI 组件的 props 就会包含 mapStateToProps 中返回的状态与 mapDispatchToProps 中的函数,也就是这样: { todos: TODO[],...的 Provider 包裹整个 app 组件,把 store 分发给所有组件 最重要的一步:在 UI 组件里获取数据和分发行为 使用 react-reduxconnect 包裹 UI

1.3K20

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

四、react-redux 可以看到上面我们并没有使用到react-redux,虽然能实现功能,细心会发现我是直接拿的store,组件多的话个个拿store,这样不好。...useEffect一样,如果不提供第二个参数,每次组件更新就会重新计算 那可能会存在一些担忧,会不会新的没有之前用的mapStateToProps好用呢?...批处理更新,使得多个useSelector()重新计算出state,组件只会重新渲染一次,不用担心useSelector重复渲染问题。...(increaseAction)}>Increase ); 由于匿名函数的性质,每次重新渲染获得新的引用,如果作为props传递给子组件,那么子组件每次都要重新渲染...的实例,来重新react-redux的useSelector和useDispatch实现。

1.3K00

react-redux

一、什么是react-redux React-Redux是Redux的官方React绑定。 它允许您的React组件从Redux存储中读取数据,并将操作分派给存储以更新数据。...它由二个重要的部分组成,一个是组件,另一个是connect()是react-redux提供的一个柯里化的函数, 用于连接redux 二、学习网址 https://react-redux.js.org...'react-redux' Provider 的引入 import { connect } from 'react-redux' connect的引入 四、关于Provider Provider是react-redux...connect有两个括号, connect有两个括号,第一个括号传mapStateToProps和mapDispatchToProps,用于把这两个方法的返回值注入到当前组件的props, 第二个括号为当前组件...connect(mapStateToProps, { add, reduce, addAsync })(Counter); mapStateToProps: 意思是把store里的state迁移到当前组件

96810

React 进阶 - React Redux

Store 中 state 的改变,促使消费对应的 state 的组件更新 # Provider 由于 Redux 数据层,可能被很多组件消费,所以 React-Redux 中提供了一个 Provider...React-Redux 提供了一个高阶组件 connect ,被 connect 包装后组件将获得如下功能: 能够从 props 中获取改变 state 的方法 Store.dispatch 如果 connect...有第一个参数,那么会将 Redux state 中的数据,映射到当前组件的 props 中,子组件可以使用消费 当需要的 state ,有变化的时候,会通知当前组件更新重新渲染视图 可以利用 connect...复制 mapStateToProps 组件依赖 Redux 的 state,映射到业务组件的 props 中,state 改变触发,业务组件 props 改变,触发业务组件更新视图 当这个参数没有的时候...,而是会下发给子代订阅器( connect 中的 Subscription ),再由子代订阅器,决定是否更新组件,层层下发 # connect 控制更新 connect 中有一个 selector

90710

Reduxreact-reduxredux中间件设计实现剖析

3.subscribe实现 尽管我们已经能够存取公用state,store的变化并不会直接引起视图的更新,我们需要监听store的变化,这里我们应用一个设计模式——观察者模式,观察者模式被广泛运用于监听事件实现...订阅更新,代码相对冗余,我们想要合并一些重复的操作,而react-redux就提供了一种合并操作的方案:react-redux提供 Provider和 connect两个API,Provider将store...) 我们已经知道,connect接收mapStateToProps、mapDispatchToProps两个方法,然后返回一个高阶函数,这个高阶函数接收一个组件,返回一个高阶组件(其实就是给传入的组件增加一些属性和功能...那么Provider存在的意义是什么,其实笔者也想过一阵子,后来才想起...上面这个connect是自己写的,当然可以直接import store,react-reduxconnect是封装的,对外只提供...mapStateToProps一起传进去,看似没必要return一个函数再传入App,为什么react-redux要这样设计,react-redux作为一个被广泛使用的模块,其设计肯定有它的深意。

2.2K20
领券