首页
学习
活动
专区
工具
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...然而正如前文提到的,mapStateToProps中的ownProps参数同样会引起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.4K20
  • 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函数中,我们通过Store的subscribe监听其变化,只要Store状态发生变化,就会调用这个组件的onChange方法;在componentWillUnmount...一个应用中,最好只有一个地方需要直接导入Store,这个位置当然应该是在调用最顶层React组件的位置。...class WithContainer extends Component { /* 在调用super的时候,一定要带上context参数,这样才能让React组件初始化实例中的context

    1.2K10

    redux原理是什么

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

    64930

    【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.3K20

    redux原理分析

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

    76820

    「源码解析」一文吃透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.4K40

    【重学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.2K20

    如何在 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.5K20

    1.1、介绍

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

    3.4K40

    更可靠的 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

    1.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

    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是store的state. // 在容器组件中,通过mapStateToProps方法,在展示组件和store中间传递数据和执行

    1.2K30

    4、React组件之性能优化

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

    61010

    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是store的state. // 在容器组件中,通过mapStateToProps方法,在展示组件和store中间传递数据和执行

    1.4K10

    【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。

    3K20

    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,让store中的count加一,页面上显示这个count。...纯函数 之前的例子已经基本实现我们的需求,但我们还可以进一步改进,上面这个函数看起来仍然不够"纯",函数在函数体内修改了store自身的dispatch,产生了所谓的"副作用",从函数式编程的规范出发,

    2.3K20

    使用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————>作为输出源。

    46710

    优雅地乱玩 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}

    67320
    领券