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

在React-Native中调用Object.assign时,Redux存储状态未更新

的问题可能是由于以下几个原因导致的:

  1. 忘记调用Redux的dispatch方法:在Redux中,要更新状态,需要通过dispatch方法派发一个action来触发状态的更新。如果在调用Object.assign之后没有调用dispatch方法,那么Redux的状态就不会更新。

解决方法:确保在调用Object.assign之后,通过dispatch方法派发一个action来更新Redux的状态。

  1. 没有正确地使用纯函数:在Redux中,reducer函数必须是纯函数,即给定相同的输入,始终返回相同的输出,且不产生任何副作用。如果在reducer函数中使用了Object.assign等可变操作,会导致Redux无法正确追踪状态的变化。

解决方法:确保在reducer函数中使用不可变的操作,例如使用扩展运算符(...)或Object.assign的不可变版本(如immer.js)来更新状态。

  1. 没有正确地连接Redux和React-Native组件:在React-Native中使用Redux,需要使用react-redux库提供的connect函数将Redux的状态和操作映射到组件的props上。如果没有正确地连接Redux和React-Native组件,那么Redux的状态更新就无法反映在组件上。

解决方法:确保在组件中正确地使用connect函数,并将Redux的状态和操作映射到组件的props上。

综上所述,要解决在React-Native中调用Object.assign时Redux存储状态未更新的问题,需要确保正确地调用dispatch方法、使用纯函数更新状态,并正确地连接Redux和React-Native组件。

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

相关·内容

React Native+React Navigation+Redux开发实用教程

Redux+react-navigation场景处理 Android 的物理返回键 Redux+react-navigation场景处理Android的物理返回键需要注意当前路由的所以位置,...+Redux打造高质量上线App获取; 问答 Redux是如何实现JS的可预测状态的管理?...示例, Object.assign() 将会返回一个新的 state 对象, 而其中的 visibilityFilter 属性被更新了: function todoApp(state = initialState...当需要拆分数据处理逻辑,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store,任何component都可以订阅store的数据...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,如某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux打造高质量上线

3.9K10

9. redux如何精简代码

通过改造,下面是一个请求GitHub Search Repositories API的action的最终代码: export function searchRepos(q = 'react-native...,那么这样的action如何解析呢,这就要使用中间件了,前文说了,redux里都是函数式的,这就可以让我们传递过程做处理了,其实可以理解为类似java spring的AOP,servlet的拦截器...真正的 Flux 模版是概念性的:发送更新的需求,用 Dispatcher 注册 Store 的需求,Store 是对象的需求 (当你想要一个哪都能跑的 App 的时候复杂度会提升)。...组件内部调用的的方式没有任何改变,这也是redux的强大之处。 给个效果图 ?...search react-native 持久化数据##### ---- 手机端肯定需要考虑离线的情况发生,有了redux,这件事情就简单了,只需要把store这个state树持久化就OK了,官方持久化接口使用的是

1.1K50

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

getState():存储的数据,状态树; dispatch(action):分发action,并返回一个action,这是唯一能改变store数据的方式; subscrible(listener):... 传统的 Flux 实现,当调用 action 创建函数,一般会触发一个 dispatch,像这样: function addTodoWithDispatch(text) { const action...(译者注:Javascript的对象存储均是由值和指向值的引用两个部分构成。此处突变指直接修改引用所指向的值, 而引用本身保持不变。).../actions' // 打印初始状态 console.log(store.getState()) // 每次 state 更新,打印日志 // 注意 subscribe() 返回一个函数用来注销监听器...现在,可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库,这时就应该调用 component.setState(newState) 来更新

3.6K10

Redux框架reducer对状态的处理

前言 react+redux项目里,关于reducer处理state的方式,redux官方文档中有这样一段描述: 不要修改 state。 使用 Object.assign() 创建了一个副本。...为什么要创建副本state redux-devtools,我们可以查看到redux下所有通过reducer更新state的记录,每一条记录都对应着内存某一个具体的state,使得用户可以追溯到每一次历史操作产生与执行的状态...若不创建副本,而是直接修改state,则redux的所有操作都将指向内存的同一个state,因而无法获得每次操作的历史状态。...方案2 采用官方实例Object.assign方法,但需要将visibilityFilter更新的对象用原state的对象进行手动赋值: function todoApp(state = initialState...小结 就redux-form而言,一些场景,能明显感受到输入操作存在顿挫感。显然,当我们选择外部插件,需要合理考虑其对state的处理方式。

2.1K50

Redux开发实用教程

; State一旦有变化,Store就会调用监听函数,来更新View; 到这儿为止,一次用户交互流程结束。...可以看到,整个流程数据都是单向流动的。 Redux和Flux的对比 Redux是Flux思想的一种实现,同时又在其基础上做了改进。... default 情况下返回旧的 state。遇到未知的 action ,一定要返回旧的 state。...当需要拆分数据处理逻辑,你应该使用 reducer 组合 而不是创建多个 store; redux一个特点是:状态共享,所有的状态都放在一个store,任何component都可以订阅store的数据...; 并不是所有的state都适合放在store,这样会让store变得非常庞大,如某个状态只被一个组件使用,不存在状态共享,可以不放在store; 参考 新版React Native+Redux

1.4K20

React Native 的未来与React Hooks

近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、...同样携程的项目中: 《携程开源RN开发框架CRN》 文章也表示第一更新到了 0.59.x 版本,现在还会觉得 React-Native “要凉” 了嘛?...题外话 : 如今的编程界里存在各种“党争”,比如前端 Vue 、React 、 Angular ,跨平台的 Cordova 、Weex 、 React-Native 、Flutter 等,而我考虑选择框架...: 在做 React-Native 的版本选择或升级,最好不要选用 0.A.0 版本,比如 0.59.0;我一般会选择大版本之后的小版本迭代,如 0.59.4 版本去升级更新,这样的版本相对更稳定,可以少躺一些问题...事实上我并非严格意义上的前端人员,大部分时候我对 CSS 和 ES 的了解也不深入,但在 JS 的使用过程中有几个让我印象深刻的: ReduxRedux状态管理设计,且由它衍生出的一系列后续和第三方插件

3.8K30

翻译 | Thingking in Redux(如果你只了解MVC)

MVC你可能有一个带setName()方法的model,Redux,你将会有一个reducer,它负责处理一个action,并将name设置到state中去。...storeRedux很特别,MVC难以找和它等价的东西。但是不用担心。store是深藏在幕后被小心保管的东西,就像是一个容器,存储了所有为state服务的reducer集合。...它有一个方法来获得当前的状态,并且暴露出方法来订阅state的变动(使用“connect()”方法)。这就是Redux允许你调用action,并能将它们像props一样传入组件的秘密了。...如你所见(以及从经验中了解到的)在上面的图表,数据能够双向流动。你view层按下了一个button,它会向你的controller发送一个信息,导致model的更新。...在这个例子,我将会展示如何编辑一个text input,然后当有用户按下按键它将会调用action来保存内容。

1.3K100

基于eos的Dapp开发--元素战争(三)

我们可以通过把登录消息存储Redux来实现,首先让我们来创建三个组件: action reducer store Action 是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源...action一般都是存储Redux的一个普通的JavaScript对象,本教程我们只需定义一个action,我们称之为SET_USER,对应到我们上一节内容的多索引表存储的数据,frontend...本文中我们reducer定义了一个初始化状态和一个状态声明相关内容。...当SET_USER action被检测到的时候,我们会用Object.assign()通过创建一个副本的方式去更新初始化的状态。...调用智能合约里面的action分为两种情况: 调用成功:SET_USER这个ation被执行且UserReducer会接收到相应的action,Redux store中将会更新用户名相应的属性值,其他信息不变

89530

React进阶(3)-上手实践Redux-如何改变store的数据

reducer函数接收的第二个参数action就是接下来要干的事情了 Redux为了能够查看store的各个状态,chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...浏览器里添加redux-devtools,创建store的createStore()的第二个参数添加redux-devtools插件的配置,使浏览器支持Redux查看store的各种状态 const...最后组件移除,销毁,componentWillUnmount取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作     ...最后组件如何感知到store的变化,实现数据的同步更新呢,redux,需要在组件内的constructor或者componentWillMount,componentDidMount函数中进行触发...用几句简单话:概括下使用Redux的流程 安装redux,然后从redux引入createStore这个方法,并调用它,从而创建store, 紧着创建reducer纯函数,reducer里面进行

2.5K30

前端一面高频react面试题(持续更新

当然可以通过 setState 的第二个参数的 callback 拿到更新后的结果setState 的批量更新优化也是建立异步(合成事件、钩子函数)之上的,原生事件和 setTimeout 不会批量更新...,异步如果对同一个值进行多次 setState,setState 的批量更新策略会对其进行覆盖,去最后一次的执行,如果是同时 setState 多个不同的值,更新时会对其进行合并批量更新合成事件是异步钩子函数的是异步原生事件是同步...这样 React更新DOM就不需要考虑如何处理附着DOM上的事件监听器,最终达到优化性能的目的。...在运行 react-native start添加参数port 8082; package.json修改“scripts”的参数,添加端口号;修改项目下的 node_modules \react-native...组件更新有几种方法this.setState() 修改状态的时候 会更新组件this.forceUpdate() 强制更新组件件render之后,子组件使用到父组件状态,导致子组件的props属性发生改变的时候

1.8K20

React进阶(3)-上手实践Redux-如何改变store的数据

纯函数实现数据更新等逻辑判断操作 触发store,注册订阅subscribe函数,监听store数据的变化,保持页面的状态与store的同步 重新获取store的数据,最终实现页面数据状态更新...reducer函数接收的第二个参数action就是接下来要干的事情了 Redux为了能够查看store的各个状态,chrome浏览器需先安装一个redux Devtools这个调试工具 当然安装这个插件...浏览器里添加redux-devtools,创建store的createStore()的第二个参数添加redux-devtools插件的配置,使浏览器支持Redux查看store的各种状态 const...最后组件移除,销毁,componentWillUnmount取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作...用几句简单话:概括下使用Redux的流程 安装redux,然后从redux引入createStore这个方法,并调用它,从而创建store, 紧着创建reducer纯函数,reducer里面进行

2.2K20

面试官最喜欢问的几个react相关问题

,与事务流无关,自然是同步;而setTimeout是放置于定时器线程延后执行,此时事务流已结束,因此也是同步;批量更新 : 合成事件 和 生命周期钩子 ,setState更新队列存储的是 合并状态...在运行 react-native start添加参数port 8082; package.json修改“scripts”的参数,添加端口号;修改项目下的 node_modules \react-native... React,组件负责控制和管理自己的状态。如果将HTML的表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互,就涉及表单数据存储问题。...如下所示, username没有存储DOM元素内,而是存储组件的状态。每次要更新 username,就要调用 setState更新状态;每次要获取 username的值,就要获取组件状态值。...如下所示,表单的值并没有存储组件的状态,而是存储表单元素,当要修改表单数据,直接输入表单即可。有时也可以获取元素,再手动修改它的值。

4K20

reactNative跨平台app开发经验分享-Redux的使用心得

Author:Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 RN 项目实际开发Redux全局参数的具体使用方法 Redux的好处: 可以把一些全局都需要使用的参数保存起来...,并且一个组件里更新这个参数后,全局里任何使用这个参数的地方都能实时更新 适用于购物车,图标右上角数字,form表单数据字典配置,权限配置,实时消息数量等等 client页面 // 此处使用了.../constants' // 定义 actionTypes const initState = { a: {}, b: 0, c: [], ... // 存储数值 } const...null : action.payload.shop.id, }]) return Object.assign({}, state, {c: value}) } constants页面 /...actionTypes.SEARCH_GET_PURCH_LIST) export const getRealEstateForm = createAction(actionTypes.SEARCH_GET_REALESTATE_LIST) 具体组件里面调用

55710

干货 | 携程度假无线前端架构演进之路

开发,运行 gulp 命令即可。 通过上述取巧的方式,我们团队成功推广了 ES6 和 React 开发模式。...此外,我们认为,Redux 的 action/reducer 包含了可预测的状态管理的必要核心部分,不管用不用 Redux状态管理最终都会暴露出一组更新函数 actions。... setupPreloadCallback 里注册一个预加载函数,支持异步,可以通过 Http 接口获取数据,并调用 action 更新状态。...而 View 层里,只需要 Model.useState 获取到当前状态,Model.useActions 获取到状态更新函数,将它们绑定到视图和事件订阅中去即可。...那么,View 层里存在的相当一部分代码,比如组件结构堆叠、状态绑定、事件绑定等,都可以提取出来,多端复用。每个端启动,注入不同的组件实现即可。

2.2K30

63. 精读《React 的多态性》-文章底部有惊喜

同样, Redux 代码中常用的 Object.assign 也有这个问题: 因为新的对象以 {} 空对象作为最初状态,js 引擎会为新对象创建 Empty Shape,这与原对象的 Shape 一定不同...顺带一提 es6 的解构语法也存在同样的问题,因为 babel 将解构最终解析为 Object.assign: 对这种尴尬的情况,作者的建议是对所有对象赋值都是用 Object.assign 以保证...这是因为 js 引擎级别的 Shapes 优化就是针对不同引用的对象,将对象的结构:Shape 与数据分离开,这样可以大幅优化存储效率,对数组也一样,上一篇精读有详细介绍。...笔者以前也经历过从 Object.assign 到 Immutablejs 库,最后又回到解构新语法的经历,觉得层级不深情况下解构语法可以代替 Immutablejs 库。...通过最近两篇精读的分析,我们需要重新思考这样做带来的优缺点,因为 js 环境Object.assign 的优化效率比 Immutablejs 库更低。

32420

ReactNative之Redux详解

一、Redux与iOS的Notification的比较 Redux 的功能和作用就是让State管理更为集中,因为redux中所有的状态都是存储Store的,而在页面的各个模块中都可以去访问和修改...Store : 从字面意思看,Store是存储、储存的意思, Redux ,把相关的状态存储了StoreReduxStore可以看做是一个单例对象。...dispatch (action) : 该方法用来修改Store存储状态值,而Action就是一个普通的对象,其中可以携带一些修改特定状态的一些信息。... Redux,这个Store就扮演着 这个NotificationCenter的角色,用来管理所有的状态。不同的,Store中会存储各种状态。...下方是具体实现的说明: AddTestView的构造方法,我们调用了 store 对象的 subscribe 方法,传入了一个回调方法,来对Store存储状态进行监听,然后获取state中最新的状态

1.3K10

React的移动端和PC端生态圈的使用汇总

状态统一集管理,`redux,mbox,redux-sage,dva`等开源库 先看看原始的react数据管理 组件间数据的传递,依靠props,状态数据提升等完成,但是对于跨层级的组件间数据传递,就不那么友好了...中使用Ant-Design yarn add @ant-design/react-native babel配置: "plugins": [ ["import", { libraryName: "@...`react-native`,移动端跨平台框架 跨平台开发首选Mac,没有为什么 官方推荐的搭建原生完整环境方式 搭建完成后,执行react-native run-ios command+d开启热更新...Java 调用Js Java通过注册表调用到CatalystInstance实例,透过ReactBridge的jni,调用到Onload.cpp的callFunction,最后通过javascriptCore...流程如下图: Js 调用Java 如果消息队列中有等待Java处理的逻辑,而且Java 超过 5ms都没有来取走,那么 JavaScript就会主动调用Java的方法,需要调用调Java模块方法,会把参数

2.3K10
领券