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

在prop中调用React-Redux操作不会产生所需的结果

在React-Redux中,prop是用于传递数据和回调函数给组件的一种机制。当在prop中调用React-Redux操作时,可能会出现不会产生所需结果的情况。这可能是由于以下几个原因导致的:

  1. 未正确连接Redux Store:在使用React-Redux时,需要确保组件已经与Redux Store正确连接。可以通过使用connect函数来连接组件和Redux Store,并确保传递了正确的mapStateToPropsmapDispatchToProps参数。
  2. 未正确映射State到prop:在mapStateToProps函数中,需要将Redux Store中的state映射到组件的prop上。如果未正确映射,组件将无法获取所需的数据。确保在mapStateToProps函数中返回所需的state属性。
  3. 未正确映射Dispatch函数到prop:在mapDispatchToProps函数中,需要将Redux Store中的dispatch函数映射到组件的prop上。如果未正确映射,组件将无法触发所需的Redux操作。确保在mapDispatchToProps函数中返回包含所需操作的对象。
  4. 异步操作未正确处理:如果在prop中进行的操作涉及到异步操作,例如发起网络请求或者调用API,需要确保正确处理异步操作的流程。可以使用Redux中间件(如redux-thunk或redux-saga)来处理异步操作,并确保正确处理异步操作的结果。

总结起来,当在prop中调用React-Redux操作不会产生所需结果时,需要确保组件已正确连接Redux Store,正确映射state和dispatch函数到prop,并正确处理异步操作。如果仍然无法解决问题,可以进一步检查Redux Store的配置和相关的Redux reducer和action是否正确。

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

相关·内容

Redux with Hooks

比如在componentDidMount设置了定时器,需要在componentWillUnmount清除;又或者componentDidMount获取了初始数据,但要记得componentDidUpdate...对应React-Redux源码是这段: // selectorFactory.js ... // 此函数connected组件接收到new props时会被调用 function handleNewProps...然而正如前文提到,mapStateToPropsownProps参数同样会引起mapStateToProps重新调用产生state props: // 此函数connected组件接收到...),那么如果selector函数返回是对象,那实际上每次useSelector执行时调用它都会产生一个新对象,这就会造成组件无意义re-render。...此外,使用Hooks自建全局状态管理方式小项目中固然可行,然而想用在较大型、正式业务,至少还要花费心思解决性能问题,而这个问题正是React-Redux等工具已经花费不少功夫帮我们解决了,似乎并没有什么充分理由要抛弃它们

3.3K60

ReactReactNative 状态管理: redux 如何使用

我们使用使用 react-redux Provider 包围了 App 组件,这样整个 App 组件都可以获取到 Store 状态和行为处理函数。...第二个参数 mapDispatchToProps 用于返回当前 UI 组件需要向外分发状态操作行为,这里我们需要分发两个行为:添加 todo 和删除 todo,通过调用第二步创建 DISPATCH_ADD_TODO...然后我们就可以 UI 组件通过 prop.todos 获取数据,通过 prop.addTodo 或者 prop.deleteTodo 通知修改数据。...store 通过 react-redux Provider 包裹整个 app 组件,把 store 分发给所有组件 最重要一步: UI 组件里获取数据和分发行为 使用 react-redux...如果要分析某个状态修改操作 reducer 里增加日志即可定位到,这就是 redux 宣称优势:“可追溯”。

1.3K20

Redux进阶(Immutable.js) 更好阅读体验Immutable.js原生Js遇到问题使用Immutable解决问题使用Immutable需要注意点参考

与原生JS交互不友好 (通过Immutable生成对象操作上与原生JS不同,如访问属性,myObj.prop1.prop2.prop3 => myImmutableMap.getIn([‘prop1...另外其他第三方库可能需要是一个普通对象) 2. Immutable依赖性极强 (一旦代码引入使用,很容易传播整个代码库,并且很难将来版本移除) 3....由于Js对象是引用类型,所以很多时候我们并不知道我们对象在哪里被操作了什么,而在Redux,因为Reducer是一个纯函数,每次返回都是一个新对象(重新生成对象占用时间及内存),再加上我们使用了...connect这个高阶组件,官方文档虽然说react-redux做了一些性能优化,但终究起来,react-redux只是对传入参数进行了一个浅比较来进行re-redering(为什么不能在mapStateToProps...,但因为Immutable每次生成对象引用都不同,哪怕是修改是很深层东西,最后比较结果也是不同,所以在这里解决了第一个问题,==re-rendering可能不会出现==。

1.3K51

redux架构基础

Redux并没有阻止一个应用拥有多个Store,只是,Redux框架下,让一个应用拥有多个Store不会带来任何好处,最后还不如使用一个Store更容易组织代码。...•不得改写参数•不能调用系统 I/O API•不能调用Date.now()或者Math.random()等不纯方法,因为每次会得到不一样结果 由于 Reducer 是纯函数,就可以保证同样State...componentDidMount函数,我们通过Storesubscribe监听其变化,只要Store状态发生变化,就会调用这个组件onChange方法;componentWillUnmount...一个应用,最好只有一个地方需要直接导入Store,这个位置当然应该是调用最顶层React组件位置。...class WithContainer extends Component { /* 调用super时候,一定要带上context参数,这样才能让React组件初始化实例context

1.2K10

redux原理是什么

使用redux之后,所有的状态都来自于storestate,并且store通过react-reduxProvider组件可以传递到Provider组件下所有组件,也就是说storestate...2.虽然Provider下组件都拥有可以操作store能力了,但是由于倘若我们要在每一个组件都从context中去获取store会造成大量代码冗余,还有一点就是即使你能在react组件能够操作...store了,但是当你dispatch一个action之后,storestate虽然更新了,但是并不会触发组件render函数去渲染新数据,所以我们就需要通过react-redux另一个高阶组件...connect组件接受一个component组件返回一个新component组件,connect最终返回组件获取store并将store设置为当前组件state,并且connect返回组件...函数调用,最终达到storestate与UIstate同步问题3.react-redux有哪些API?

62830

redux原理分析

使用redux之后,所有的状态都来自于storestate,并且store通过react-reduxProvider组件可以传递到Provider组件下所有组件,也就是说storestate...2.虽然Provider下组件都拥有可以操作store能力了,但是由于倘若我们要在每一个组件都从context中去获取store会造成大量代码冗余,还有一点就是即使你能在react组件能够操作...store了,但是当你dispatch一个action之后,storestate虽然更新了,但是并不会触发组件render函数去渲染新数据,所以我们就需要通过react-redux另一个高阶组件...connect组件接受一个component组件返回一个新component组件,connect最终返回组件获取store并将store设置为当前组件state,并且connect返回组件...函数调用,最终达到storestate与UIstate同步问题3.react-redux有哪些API?

74820

【React】211- 2019 React Redux 完全指南

count 存在 App state 里,会以 prop 形式向下传递: ? 要想数据向上传递,需要通过回调函数实现,因此必须首先将回调函数向下传递到任何想通过调用它来传递数据组件。 ?... React 应用添加 Redux CodeSandbox ,展开左侧 Dependencies 选项,然后点击 Add Dependency。...你函数调用时会接收两个参数:上一次迭代结果,和当前数组元素。它结合当前元素和之前 “total” 结果然后返回新 total 值。... index.js 里,引入 Provider 然后用它把 App 内容包装起来。store 会以 prop 形式传递。...BEGIN/SUCCESS/FAILURE 模式很棒,因为它给你提供钩子来跟踪发生了什么 —— 比如,设置 “loading” 标志为 “true” 以响应 BEGIN 操作 SUCCESS 或 FAILURE

4.2K20

「源码解析」一文吃透react-redux源码(useMemo经典源码级案例)

正式分析之前我们不妨来想几个问题: 1 为什么要在 root 根组件上使用 react-redux Provider 组件包裹?...notifyNestedSubs trySubscribe tryUnsubscribe 整个 react-redux 执行过程 Subscription 作用非常重要,这里方便先透漏一下,他作用是收集所有被...因为 高阶组件 包装 业务组件过程,如果不对静态属性或是方法加以额外处理,是不会被包装后组件访问到,所以需要类似hoistStatics这样库,来做处理。...prop renderIsScheduled.current = false // 当前组件渲染完成 } captureWrapperProps 作用很简单,一次组件渲染更新后,将上一次 合并前...整个react-redux源码,对于useMemo用法还是蛮多,我总结了几条,奉上??: 1 缓存属性 / 方法 react-redux源码,多处应用了useMemo 依赖/缓存 属性情况。

2.3K40

【重学React】动手实现一个react-redux

每个需要与 redux 结合使用组件,我们都需要做以下几件事: 组件获取 store 状态 监听 store 状态改变,状态改变时,刷新组件 组件卸载时,移除对状态变化监听。...逻辑复用 src 目录下新建一个 react-redux 文件夹,后续文件都新建在此文件夹。...mapStateToProps 需要从整个状态挑选组件需要状态,但是调用 connect 时,我们并不能获取到 store ,不过 connect 内部是可以获取到 store ,为此,我们将...mapStateToProps 定义为一个函数, connect 内部调用它,将 store state 传递给它,然后将函数返回结果作为属性传递给组件。...最后,使用我们自己编写 react-redux 和 redux 编写了 Todo demo,功能正常,代码 https://github.com/YvetteLau/Blog myreact-redux

3.1K20

1.1、介绍

...) 1.2、React特点 a、声明式设计 react是面向数据编程,不需要直接去控制dom,你只要把数据操作好,react自己会去帮你操作dom,可以节省很多操作dom代码。...react 和 react-dom,可以把 18 替换成所需加载版本号。...,JavaScript代码部分里面如果涉及到DOMclass属性操作,不要直接使用class,因为class是es6里面的关键词,react里面需要使用className进行替换 1 const vNode...,若组件没有定义,则报错 项目中尝试JSX最快方法是页面添加这个  标签,引入解析jsx语法babel类库 标签块中使用了JSX语法,则一定要申明类型type=... src/ 文件夹创建一个名为 index.css 文件,并拷贝这些 CSS 代码。  src/ 文件夹下创建一个名为 index.js 文件,并拷贝这些 JS 代码。

3.3K40

如何在 React 应用中使用 Hooks、Redux 等管理状态

const [state, dispatch] = useReducer(reducer, { count: 0 }) 最后,我们不会直接调用 reducer 去更新状态,而是调用我们刚刚创建函数...(这也是 Redux 被批评主要原因),所以让我们把它分解成几块: 正如我提到,Redux 是一个外部库,所以进行任何操作之前,我们需要通过运行 npm i redux react-redux 来安装它...redux 将带来管理状态所需核心函数,而react-redux 将安装一些很酷 hook,可以轻松地从我们组件读取和修改状态。 现在,首先是 store。...示例,你可以看到我们调用 ADDSOME/SUBSOME 时可以直接从组件传递我们想要加/减数字。...我们 UI ,我们只是调用 setCount 函数来更新我们状态。

8.4K20

更可靠 React 组件:提纯

prop 值渲染出同样元素; 一个 几乎纯组件(almost-pure compoent) 总是针对同样 prop 值渲染同样元素,并且会产生一个 副作用(side effect) 函数式编程术语里...sayOnce() 函数体 said = true 语句修改了全局状态。这产生了副作用,这是非纯另一个特征。 因此可以说,纯函数没有副作用,也不依赖全局状态。 其单一数据源就是参数。...Redux 将副作用实现细节从组件抽离出方面是一把好手。...this.props.fetch() 作为被孤立并扁平化非纯代码,正是它产生了副作用。要感谢 Redux 是,组件不会再被 axios 库细节、服务端 URL,或是 promise 搞得混乱。...让我们把 fetch() 调用抽取到 recompose 库提供 lifecycle() HOC : import { connect } from 'react-redux'; import

1K10

React性能优化 -- 利用React-Redux

简单来说,就是页面一开始打开时候,React会调用render函数构建一棵Dom树,state/props发生改变时候,render函数会被再次调用渲染出另外一棵virtula Dom,接着,React...找出优化点 注意这里面,如果可以渲染virtual DOM之前就可以判断渲染结果不会有变化,那么可以直接不进行virtual DOM渲染和比较,速度会更快。...PropTypes.string.isRequired, completed: PropTypes.bool.isRequired } 对于这个todo来说,只要completed跟text都没有发生改变,那么这个组件渲染结果不会发生改变...) }) 方法二: 直接让TodoList不要给todo传递任何函数类型prop,点击事件完全由todo组件自己搞定。...// TodoList只需要穿一个id出来 <Todo {...todo} key={index} *id={item.id}* /> // todo,自己通过react-redux派发

1K10

4、React组件之性能优化

; 当然,如果能够开始计算Virtual DOM之前就判断渲染结果不会有变化,那么就可以不进行Virtual DOM计算和比较,速度就会更快。...2.shouldComponentUpdate默认实现方式 既然可以对组件开始计算Virtual DOM之前判断渲染结果不会有变化时,阻止渲染进行, 从而提升性能,那么我们自然想到使用shouldComponentUpdate... onToggleTodo(item.id)}/> 应该避免使用上面的函数传递模式,因为这里赋值是一个匿名函数,而且是赋值时候产生,也就是说 每次渲染都会产生一个新函数...如果要传递prop很多呢? 恩~~用React-Redux的话,有对shouldComponentUpdate默认实现。 3....,同样一个组件实例不同更新过程数组下标完全可能不同, 把下标当做可以就会让React乱套,记住key不仅要唯一还要确保稳定不可变 需要注意:虽然key是一个prop,但是接受key组件不能读取

58510

Redux入门实战——todo-list2.0实现

1.前言 之前博客,我写了一篇关于todo-list实现博客,一步一步详细记录了如何使用基础React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观认识和粗浅理解...redux不会直接修改state,而是状态发生更改时,返回一个全新状态,旧状态并没有进行更改,得以保留。可以使用 redux-devtools-extension 工具进行可视化查看。...) 方法更新 state; 通过 subscribe(listener) 注册监听器,state状体发生变化后会被调用。...,而不会对旧 state进行操作,任何一个阶段 state 都可以进行查看和监测,这让 state 管理变得可控,可以实时追踪 state变化。.../components/Link' //mapStateToProps参数state是storestate. // 容器组件,通过mapStateToProps方法,展示组件和store中间传递数据和执行

1.3K10

【React】你想知道关于 Refs 知识都在这了

通常在构造函数,将 Refs 分配给实例属性,以便在整个组件引用。 访问 Refs 当 ref 被传递给 render 元素时,对该节点引用可以 ref current 属性访问。...尽管高阶组件约定是将所有的 props 传递给被包装组件,但是 refs 是不会被传递,事实上, ref 并不是一个 prop,和 key 一样,它由 React 专门处理。... React.forwardRef 之前,这个问题,我们可以通过给容器组件添加 forwardedRef (prop名字自行确定,不过不能是 ref 或者是 key)....,传递 ref 即可 return ( ) } react-redux 获取子组件(被包装木偶组件)实例 旧版本...ReactDOM.findDOMNode(ref) 当 ref HTML 上,返回是该 DOM;当 ref 组件上时,返回是该组件 render 方法 DOM。

2.9K20

Redux入门实战——todo-list2.0实现

1.前言 之前博客,我写了一篇关于todo-list实现博客,一步一步详细记录了如何使用基础React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观认识和粗浅理解...redux不会直接修改state,而是状态发生更改时,返回一个全新状态,旧状态并没有进行更改,得以保留。可以使用 redux-devtools-extension 工具进行可视化查看。...) 方法更新 state; 通过 subscribe(listener) 注册监听器,state状体发生变化后会被调用。...,而不会对旧 state进行操作,任何一个阶段 state 都可以进行查看和监测,这让 state 管理变得可控,可以实时追踪 state变化。.../components/Link' //mapStateToProps参数state是storestate. // 容器组件,通过mapStateToProps方法,展示组件和store中间传递数据和执行

1.2K30

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

执行结果 到这里,一个简单redux就已经完成,redux真正源码还加入了入参校验等细节,但总体思路和上面的基本相同。...尽管说我们已经实现了redux,但coder们并不满足于此,我们使用store时,需要在每个组件引入store,然后getState,然后dispatch,还有subscribe,代码比较冗余,我们需要合并一些重复操作...订阅更新,代码相对冗余,我们想要合并一些重复操作,而react-redux就提供了一种合并操作方案:react-redux提供 Provider和 connect两个API,Provider将store...代码,index.js是项目的入口文件,App.js我们简单写一个计数器,点击按钮就派发一个dispatch,让storecount加一,页面上显示这个count。...纯函数 之前例子已经基本实现我们需求,但我们还可以进一步改进,上面这个函数看起来仍然不够"纯",函数函数体内修改了store自身dispatch,产生了所谓"副作用",从函数式编程规范出发,

2.2K20

使用Redux制作一个TodoList

# 引言 组件化开发 web 前端当中,经常需要在不同组件之间进行通信以及一些数据共享,那么我们就需要使用像 Vuex 那样状态管理工具, React 当中,经常使用 Redux 来做状态管理工具...# 一、开始 这里使用 antd 作为 TodoList UI 组件,所以首先我们需要在项目当中安装 antd yarn add ant yarn add redux yarn add react-redux...# 1、Provider 组件 使用 react-redux 做状态管理时,需要在全局APP组件外包裹一层 Provider 组件,并设置其属性sotre 如下语句: import React from...(AppUI); connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 更新不会引起 UI 组件更新。...返回一个对象,key为UI界面对应名称,value为state处理结果 mapDispatchToProps:更新 action————>作为输出源。

44210

优雅地乱玩 Redux-2-Usage with React

Store 进行任何交互 Container Components(下称 CC)有这么几个特性: 给PC传递 Props, 提供数据 提供一些 action, 如果PC需要任何交互操作的话,那么就应该调用...React App , TodoList里面仅仅对传进去props进行渲染 connect()函数做事情是: 将State已经Dispatcher一系列处理结果转换成props并且传给TodoList...结果返回一个 obj, 并且这个 obj 会被 merge 到props里面 这个函数会跟redux注册, 类似于绑定, 一旦store里面的状态被更新, 那么这个函数将被调用 如果不想在这个时候被监听...,那么直接传一个null或者undefined 第二个参数就是对应组件自身props 另外当传递第二个参数时候, 如果组件自身props被更新了, 这个函数也会被重新调用, 并且这个比较是一种浅层比较...'prop-types' const Link = ({ active, onClick, children }) => ( <button onClick={onClick}

64320
领券