immutable.js 更新数组(mergeDeepWith)
使用情境:
技术栈为:react + redux + antd (reducer中处理数据使用了immutable.js).
问题:如下图,做一个搜索功能,form表单每改变一次,都会调用一个update函数将更新的数据合并进去。在下图中,标签传递的值为{ label: ["1", "2", "3"] },在增加一个标签会传{ label: ["1", "2", "3","n"] },这是没有问题的,但是在减少到两个标签的时候传的值应该是{ label: ["1", "2"] },但是却会传{ label: ["1", "2", "3","n"] }。也就是说假如两个数组A和B,我应该每次传B,结果却传了AUB。
解决:在reducer中处理纯函数
function _updateDocumentCenterListConditions(state, cdt) {
//取出state更新前代表label标签的数组
let label_ids = state.getIn(['conditionsSearch', 'label_ids']);
//如果不为bull的话将其转化为js赋值给label_ids_tojs
let label_ids_tojs = label_ids && label_ids.toJS();
//判断更新后的state中是否选中了标签
if(cdt && cdt.toJS().label_ids && cdt.toJS().label_ids.length > 0){
//如果更新前的state有值,并且它的数组长度大于更新后的state标签的数组长度
if(label_ids_tojs && (label_ids_tojs.length > cdt.toJS().label_ids.length)) {
//将原来state中的标签值置为null
state = state.setIn(['conditionsSearch', 'label_ids'],null)
}
}
return state.mergeDeepWith((prev, next) => next === undefined ? prev : next, { conditionsSearch: cdt });
}
这样的话再使用mergeDeepWith就不会出现AUB的情况了,因为如果A的长度大于B的长度的话,就会将A的长度置为null。
immutable.js 更新数组(mergeDeepWith)的更多相关文章
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 深度浅出immutable.js
这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs() Deeply converts plain JS objects and arrays to Immutable Ma ...
- 大话immutable.js
为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...
- React+Immutable.js的心路历程
这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以 ...
- js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...
- Redux进阶(Immutable.js)
更好的阅读体验 更好的阅度体验 Immutable.js Immutable的优势 1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象) 2. 丰富的API 3. 性能好 ...
- Js~对数组的操作
在工作中可能用的不多,但一些特殊的场合还是会用到,所以在这里,把JS的数组操作总结一下,分享给大家! Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: ...
- Immutable.js 实现原理
Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https:/ ...
- 使用OnPush和immutable.js来提升angular的性能
angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码 <div> {{hello()}} </div> 则每次变化检测都会执行hello函数,如果hello函数 ...
随机推荐
- 字符函数 php
strrchr( '123456789.xls' , '.' ); //程序从后面开始查找 '.' 的位置,并返回从 '.' 开始到字符串结尾的所有字符
- C#执行批处理命令
using System.Diagnostics ; using System.IO; private void btnRun_Click(object sender, EventArgs e) ...
- [转载] zookeeper 分布式锁服务
转载自http://www.cnblogs.com/shanyou/archive/2012/09/22/2697818.html 分布式锁服务在大家的项目中或许用的不多,因为大家都把排他放在数据库那 ...
- [转载] NoSQL简介
摘自“百度百科”. NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从 ...
- WebService学习总结
因为最近开发的项目需求中涉及到了webservice,正好对这块知识以前学过但是又忘记了,于是想着从新学习下,整理一个笔记,便于后面的复习.于是有了本文,下面开始介绍webservice. 一.简介 ...
- oracle一些基本命令
Oracle安装配置 设置四个账户及对应的密码 No. 用户名 口令 1 sys change_on_install 2 system manager 3 scott tiget 4 sh sh 上面 ...
- android shape 大全 (转)
1. 各属性的配置语法 在项目 res/drawable 文件夹中创建一个以 shape 为根节点的 XML 文件,基本语法如下: <?xml version="1.0" e ...
- TFboy养成记 MNIST Classification (主要是如何计算accuracy)
参考:莫烦. 主要是运用的MLP.另外这里用到的是批训练: 这个代码很简单,跟上次的基本没有什么区别. 这里的lossfunction用到的是是交叉熵cross_entropy.可能网上很多形式跟这里 ...
- 使用asp.net mvc引擎开发插件系统
一.前言 我心中的插件系统应该是像Nop那样(更牛逼的如Orchard,OSGI.NET),每个插件模块不只是一堆实现了某个业务接口的dll,然后采用反射或IOC技术来调用,而是一个完整的mvc小应用 ...
- 变位词(0029)-swustoj
变位词(0029)水题 变位词如果两个单词的组成字母完全相同,只是字母的排列顺序不一样,则它们就是变位词,两个单词相同也被认为是变位词.如tea 与eat , nic 与cin, ddc与dcd, a ...