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

React-redux:为什么我发送一个状态改变但视图没有更新的动作?

React-redux是一个用于管理React应用状态的库。它结合了React和Redux,提供了一种可预测的状态管理解决方案。

当你发送一个状态改变的动作时,但视图没有更新,可能有以下几个原因:

  1. 没有正确连接React组件和Redux store:在使用React-redux时,你需要确保你的组件正确连接到Redux store。你可以使用connect函数来连接组件和store,并将状态和动作作为props传递给组件。
  2. 没有正确使用Redux的reducer:Redux的reducer负责处理状态的改变。你需要确保你的reducer正确地处理了相应的动作,并返回一个新的状态对象。如果你的reducer没有正确处理动作,那么状态就不会更新。
  3. 没有正确使用React的生命周期方法:React组件有一些生命周期方法,如componentDidUpdate,用于在组件更新后执行一些操作。你可以在这些方法中检查状态的改变,并更新视图。
  4. 没有正确使用React-redux的connect函数:connect函数接受一个参数mapStateToProps,它用于将状态映射到组件的props。如果你没有正确地定义mapStateToProps,那么组件就无法获取到状态的更新。
  5. 没有正确使用React-redux的connect函数:connect函数还接受一个参数mapDispatchToProps,它用于将动作映射到组件的props。如果你没有正确地定义mapDispatchToProps,那么组件就无法触发动作来改变状态。

综上所述,当你发送一个状态改变但视图没有更新的动作时,你需要检查是否正确连接了React组件和Redux store,是否正确使用了Redux的reducer,是否正确使用了React的生命周期方法,以及是否正确使用了React-redux的connect函数。

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

相关·内容

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

,集中管理组件状态.核心在于store,它提供了dispatch,getState,subscribe方法,理解Redux工作流程很重要 react-redux: 它是redux作者封装一个库,是一个第三方模块...: 它不是必须,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员熟悉程度,适合自己才是最好,使用后者提供了一些便利,需要额外掌握一些API使用...如果一个组件既有 UI 又有业务逻辑,那怎么办?可以将它拆分成下面的结构:外面是一个容器组件,里面包了一个UI 组件。前者负责与外部通信,将数据传给后者,由后者渲染出视图。...综归来说, connect做了两件事情: 把store上状态转换为内层UI组件(傻瓜组件)props 把内层UI组件(无状态组件)中用户触发动作转化为派送个store动作,前者(mapStateToProps...可以更简便管理我们状态,更好组织我们代码 但是随之而来就是学习成本,得学习那些 Provider, connect等API使用,这也是为什么这些框架令人蛋疼原因,本以为学了React能搞事

2K10

Rematch: Redux 重新设计

在本文中,我们将探讨一些你可能一直在问自己问题: 你是否需要一个用于状态管理库? Redux 受欢迎程度是否值得我们去使用? 为什么或者为什么不值得? 我们能否制定更好状态管理解决方案吗?...让我们看看使用React等基于组件视图框架/库时选项: 1. Component State (组件状态) 存在于单个组件内部状态。在React中,通过setState方法更新state。...那么为什么这么喜欢一个简单库呢? Redux 更具性能?答案是否定。事实上,为了每一个必须处理动作(action),都会稍微慢一些。 Redux是否更简单?当然不是。...只有一种方法:派发(Dispatch)一个动作(Action)到管道中,管道会自动根据动作更新状态。 沿着管道有两组侦听器:中间件(middleware)和订阅(subscriptions)。...将 Redux 视为一个带有更新前/更新后钩子全局对象,以及能够以简单方式合成新状态。 Redux 是不是太复杂了? 是的。

1.5K50

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

Redux 关系: 它不是必须,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员熟悉程度,适合自己才是最好,使用后者提供了一些便利,需要额外掌握一些...如果一个组件既有 UI 又有业务逻辑,那怎么办?可以将它拆分成下面的结构:外面是一个容器组件,里面包了一个UI 组件。前者负责与外部通信,将数据传给后者,由后者渲染出视图。...,没有mapDispatchToProps,这也是没有什么问题,如下代码所示 import { connect } from 'react-redux'const VisibleTodoList =...综归来说, connect做了两件事情: 把store上状态转换为内层UI组件(傻瓜组件)props 把内层UI组件(无状态组件)中用户触发动作转化为派送个store动作,前者(mapStateToProps...可以更简便管理我们状态,更好组织我们代码 但是随之而来就是学习成本,得学习那些 Provider, connect等API使用,这也是为什么这些框架令人蛋疼原因,本以为学了React能搞事

2.2K00

Redux 快速上手指南

发出了做某件事请求,只是描述了要做某件事,并没有改变state来更新界面,reducer就是根据actiontype来处理不同事件; store:store就是把action和reducer联系到一起对象...属性React.js同学都知道,React被设计为一个MVC架构中View(视图)函数库,实际上它可以作事情比MVC中View(视图)还要更多,它甚至可以作类似Model(模型)或Controller...单向数据流是Flux架构核心设计,其流程示意图如下: 这个数据流位于最中心设计是一个AppDispatcher(应用发送器),你可以把它想成是个发送中心,不论来自组件何处动作都需要经过它来发送...每个store会在AppDispatcher上注册它自己,提供一个callback(回调),当有动作(action)发生时,AppDispatcher(应用发送器)会用这个回调函数通知store。...payload - 用于更新状态数据。 创建一个Redux存储区,它只能使用reducer作为参数来构造。存储在Redux存储区中数据可以被直接访问,只能通过提供reducer进行更新

1.2K20

Redux流程分析与实现

• 应用状态改变通过纯函数来完成 Redux使用纯函数方式来执行状态修改,Action表明了修改状态意图,而真正执行状态修改则是Reducer。...在Redux中,State变化会导致View变化,而State状态改变是通过接触View来触发具体Action动作,根据View触发产生Action动作不同,就会产生不同State结果。...Store,以后每当store.dispatch发送过来一个Action,就会自动调用Reducer得到新State。...store调用store.subscribe(listener)监听state变化,state一旦发生改变就会触发store更新,最终view会根据store数据更新刷新界面。...react-redux redux作为一个通用状态管理库,它不只针对react,还可以作用于其它像vue等。

1K30

React全家桶之Redux使用

使用redux 让我们闭上眼睛想想,如果用一个词描述React 和Redux 给我们留下了什么印象,想到不是难学,不是繁琐,而是“限制”。...惟一改变 state 办法是触发 action,一个描述发生什么对象。 为了描述 action 如何改变 state 树,你需要编写 reducers。...改变 state 惟一方法是 dispatch action。你也可以 subscribe 监听 state 变化,然后更新 UI。 // 可以手动订阅更新,也可以事件绑定到视图层。...这需要react-redux提供另外一个函数:connect connect(state=>({ fruits:state.list, }))(原来函数组件) 原来函数组件,映射出来,自动带上了各种状态...// store // 在把异步请求动作放到一个异步操作中。

1.3K20

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

这里我们将使用 React 作为绑定视图层,因为 Redux 最初诞生于 React 社区,为解决 React 状态管理问题而设计和开发一个库。...Reducers 我们日常生活中看到网页,它不是一成不变,而是会响应用户动作”,无论是页面跳转还是登陆注册,这些动作改变当前应用状态。...我们在组件 B 中发起一个更新状态 C 动作,此动作对应更新函数更新 Store 状态树,之后将更新状态 C 传递给组件 C,触发组件 C 重新渲染。...一个 Action 就是一个简单 JavaScript 对象: { type: 'ADD_TODO', text: '是一只小小小图雀' } 我们可以看到一个 action 包含动作类型,以及更新状态需要数据...) 方式来发起一个更新 Store 中状态动作

1.8K20

数据流管理方案 | Redux 和 MobX 哪个更好?

嗨,是你稳定更新、持续输出勾勾。 ? 面试中常问一道问题就是“你了解哪些数据流管理方案”,面对这样提问,先搞懂为什么要学数据流管理,再来梳理、对比你所知道方案。...这个结构思想,对于数据流管理来说可谓是开天劈地存在, 如下图所示: ? 先解释下上图中涉及概念。 View(视图层):用户界面。...Action(动作):也可以理解为视图层发出“消息”,它会触发应用状态改变。 Dispatcher(派发器):它负责对 action 进行分发。...Redux 是一个状态容器,这里举个例子来解释下什么是状态容器。就像办公室里饮水机,所有员工不分高低贵贱,有人口渴就去接水就行了。...会更新到 store 对象里,进而驱动视图层面做出对应改变

1.9K21

Redux

思想 ​ 应用中所有的state都以一个对象树形式储存在一个单一store中。唯一能改变state办法是触发action,一个描述发生什么对象。...这样确保了视图和网络请求都不能直接修改state,相反它们只能表达想要修改意图。 使用纯函数来执行修改 ​ 为了描述action如何改变state tree,需要编写reducers。...我们还需要添加一个action index字段来表示用户完成任务动作序列号。因为数据是存放在数组中,所以我们通过下标index哎引用特定任务。...Reducer ​ Reducers指定了应用状态变化如何响应actions并发送到store,actions只是描述了有事情发生了这一事实,并没有描述应用如何更新state。 ​...只要传入参数相同,返回计算得到一个state就一定相同。没有特殊情况,没有副作用,没有API请求,没有变量修改,单纯执行计算。

1.7K20

设计师都能懂 Redux 指南

你们很多人可能都听说过,它工作是状态管理。稍后将解释状态管理含义, 此刻,只能想让你看下面这张图: 为什么要了解 Redux Redux 更多是关于应用程序内部工作而不是它外观和感受。...这是一个有点复杂工具,学习曲线相对陡峭,这是否意味着我们作为设计师应该远离它? 不。认为我们应该拥抱它。汽车设计师应该了解引擎用途,对吗?...如果我们没有一个适合所有逻辑良好结构,很容易让人令人不知所措,代码也很难理解和维护。 Redux 让我们分而治之。 它提供了一种将数据更新逻辑分解为小“reducer”标准方法。...每一个动作(数据变更)都必须用清晰文字来描述。你必须把你要做事写下来,然后再做改变。你不能改变数据而不留下痕迹。在 Redux 术语中这称之为 “派发 (dispatching) 动作”。...,而不用等信息从客户端发送到服务器,完成更新确认,再从服务器返回客户端这一个来回完成后再做响应。

1.6K10

深入浅出redux知识

此函数第一个参数是 state 状态,第二个参数是 action 动作,action 参数是个对象,对象里面有一个不为 undefined type 属性,就是根据这个属性去区分各种动作类型。...state 和 props 改变都会导致视图更新,每当容器里面的状态改变需要修改 state,此时就需要用到 store 中 subscribe 订阅这个修改状态方法,该方法返回值是取消订阅,要修改容器中状态要用...npm install react-redux 这个库是连接库,用来和react和redux进行关联,上面使用redux时候发现一个痛点就是要订阅设置状态方法还要取消订阅,而react-redux.../createStore' export { createStore } 回顾一下createStore是怎么使用,使用时候需要传入一个处理器reducer函数,根据动作类型修改状态然后返回状态...redux中还有订阅和取消订阅方法,每当状态改变执行订阅函数。发布订阅是我们再熟悉不过原理了,就不多说了。

97560

从设计角度看 Redux

为什么要了解 Redux Redux 更多是关于应用程序内部工作而不是它外观和感受。 这是一个有点复杂工具,学习曲线相对陡峭,这是否意味着我们作为设计师应该远离它? 不。...如果我们没有一个适合所有逻辑良好结构,很容易让人令人不知所措,代码也很难理解和维护。 Redux 让我们分而治之。 它提供了一种将数据更新逻辑分解为小“reducer”标准方法。...没有向你展示Redux真正力量! ? Redux 迫使开发人员遵循一些严格规则,这给 Redux 带来了强大功能。 所有数据(应用程序状态)必须以明文形式描述。...每一个动作(数据变更)都必须用清晰文字来描述。你必须把你要做事写下来,然后再做改变。你不能改变数据而不留下痕迹。在 Redux 术语中这称之为 “派发 (dispatching) 动作”。...,而不用等信息从客户端发送到服务器,完成更新确认,再从服务器返回客户端这一个来回完成后再做响应。

1.7K30

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

-- Redux文档 上面这一大段引用概况起来就是一句话, state(状态)在什么时候什么地方,因为什么而变化成了一个不受控制过程。...(Redux是Javascript应用程序可预测状态容器。)这句话,为什么是可预测?...因为只有一个state树,并且它是只读,而且只能通过action来改变改变过程变得清晰可追踪),并且获取state(状态)只能通过reducer,而reducer是一个纯函数(此处了解state是重点...为什么选择react-redux react-redux是官方提供绑定库,由redux开发者维护,可以很好与redux保持同步。 它鼓励组件分离。...粗暴地、级联式刷新视图(使用react-redux优化)。 分型。原生 Redux-react 没有分形结构,中心化 store; Redux最佳实践?

1.5K10

React高级篇(一)从Flux到Redux,react-redux

image.png Actions: 驱动Dispatcher发起改变 Dispatcher: 负责分发动作(事件) Store: 储存数据,处理数据 View: 视图部分 Dispatcher只会暴露一个函数...,需要调用Action触发状态更新 onClickIncrementButton() { Actions.increment(text); } } Flux缺点为: 一个应用可以拥有多个...针对Flux不足,Redux框架出现。 Redux 相比Flux,Redux有如下两个特点: 在整个应用只提供一个Store,它是一个扁平树形结构,一个节点状态应该只属于一个组件。...即不能修改老状态,只能返回一个状态。 Redux数据流如下(来自网络): ?...给出同样参数值,该函数总是求出同样结果。 该函数结果值不依赖任何隐藏信息或程序执行处理可能改变状态或在程序两个不同执行。 2. 结果求值不会促使任何可语义上可观察副作用或输出。

1.9K20

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

详细一些: Redux会将整个应用状态(其实也就是数据)存储到Store Store里面保存一棵状态树(state tree) 组件改变state唯一方法是通过调用storedispatch方法,触发一个...中状态(state)来刷新自己视图 可以结合这张图看: [image.png] 三、Redux怎么用?...如果一些东西改变了,就可以知道为什么变。 Reducer: 把 action 和 state 串起来,reducer 只是一个接收 state 和 action,并返回新 state 函数。...四、react-redux 可以看到上面我们并没有使用到react-redux,虽然能实现功能,细心会发现是直接拿store,组件多的话个个拿store,这样不好。...总结 作为一个之前vue技术栈转react技术栈菜鸟来说,还是踩了一些: 比如在有了vuex基础之后,然后有没有理解清楚理解redux,很容易觉得他两差不多,实际还是有挺多区别的,也是深入学习

1.3K00

react-hooks如何使用?

react-hooks是react16.8以后,react新增钩子API,目的是增加代码可复用性,逻辑性,弥补无状态组件没有生命周期,没有数据管理状态state缺陷。...2.为什么要使用hooks 我们为什么要使用react-hooks呢,首先和传统class声明状态有着显著优点就是 1 react-hooks可以让我们代码逻辑性更强,可以抽离公共方法,公共组件...,所以需要配合useMemo,usecallback等api配合使用,这就是为什么滥用hooks会带来负作用原因之一了。...redux useReducer 是react-hooks提供能够在无状态组件中运行类似redux功能api,至于它到底能不能代替redux react-redux ,个人看法是不能 ,redux...我们知道无状态组件更新是从头到尾更新,如果你想要从新渲染一部分视图,而不是整个组件,那么用useMemo是最佳方案,避免了不需要更新,和不必要上下文执行,在介绍useMemo之前,我们先来说一说

3.5K80

react-redux源码解读

写在前面 react-redux作为胶水一样东西,似乎没有深入了解必要,实际上,作为数据层(redux)与UI层(react)连接处,其实现细节对整体性能有着决定性影响。...2.引发视图更新从哪个组件开始? 3.哪些组件render被调用了? 4.每个叶子组件都被diff波及了吗?为什么?...如果无法准确回答这几个问题,对性能肯定是心里没底 一.作用 首先,明确redux只是一个数据层,而react只是一个UI层,二者之间是没有联系 如果左右手分别拿着redux和react,那么实际情况应该是这样...向redux注册store change监听动作发生在connect()(myComponent)时,事实上react-redux只对顶层Container直接监听了reduxstate change...,那么在HomeContainer关注state发生变化时,会不会走很多遍视图更新

94120

React 进阶 - React Redux

# React-Redux,Redux,React 三者关系 Redux Redux 是一个应用状态管理 js 库,它本身和 React 是没有关系 Redux 可以应用于其他框架构建前端应用,甚至也可以应用于...中 Store 如何根据 Store 改变,把消息派发给应用中需要状态一个组件 React React 是一个前端框架,它本身和 Redux 也是没有关系 # Redux # 三大原则...: 上述 Demo 无法满足状态共用情况 正常情况不可能将每一个需要状态组件都用 subscribe / unSubscribe 来进行订阅 比如 A 组件需要状态 a,B 组件需要状态 b ,那么改变...Store 中 state 改变,促使消费对应 state 组件更新 # Provider 由于 Redux 数据层,可能被很多组件消费,所以 React-Redux 中提供了一个 Provider...复制 mapStateToProps 组件依赖 Redux state,映射到业务组件 props 中,state 改变触发,业务组件 props 改变,触发业务组件更新视图 当这个参数没有的时候

90210

彻底让你理解redux

只有当某一个动作发生时候才能够触发这个state去改变,那么,触发state变化原因那么多,比如这里我们点击事件,还有网络请求,页面进入,鼠标移入。。。...如果都快把action说完了你还是不懂action是什么的话,你就理解成,一个可能!改变state动作包装。...reducer 既然这个可能改变state动作已经包装好了,那么我们怎么去判断并且对state做相应改变呢?对,这就是reducer干的事情了。...store创建通过reduxcreateStore方法创建,这个方法还需要传入reducer,很容易理解:毕竟需要dispatch一个action来改变state嘛。...简单说,UI组建负责美的呈现,容器组件负责来帮你盛着,给你"力量" 好吧,官方点: UI 组件有以下几个特征: 只负责 UI 呈现,不带有任何业务逻辑 没有状态(即不使用this.state这个变量

49410

react-redux 源码解析一: Provider做了什么,发布订阅模式实现?

使用过react同学都知道,redux作为react公共状态管理容器,配合react-redux可以很好派发更新更新视图渲染作用,那么对于react-redux是如何做到根据state改变,而更新组件...,促使视图渲染呢,让我们一起来探讨一下,react-redux源码奥妙所在。...在正式分析之前我们不妨来想几个问题: 1 为什么要在root跟组件上使用react-reduxprovider组件包裹 2 redux是使用store.subscribe()来发布订阅 ,那么react-redux...这里我们弄明白一个问题 react-redux更新组件也是用了store.subscribe 而且store.subscribe只用在了父级Subscription(没有parentsub)中。...总结 到这里我们明白了 : 1 react-redux provider 作用 ,通过reactcontext传递 subscription 和 redux中store,并且建立了一个最顶部根

1.5K30
领券