使用情境:

  技术栈为: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)的更多相关文章

  1. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  2. 深度浅出immutable.js

    这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs()  Deeply converts plain JS objects and arrays to Immutable Ma ...

  3. 大话immutable.js

    为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...

  4. React+Immutable.js的心路历程

    这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以 ...

  5. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  6. Redux进阶(Immutable.js)

    更好的阅读体验 更好的阅度体验 Immutable.js Immutable的优势 1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象) 2. 丰富的API 3. 性能好 ...

  7. Js~对数组的操作

    在工作中可能用的不多,但一些特殊的场合还是会用到,所以在这里,把JS的数组操作总结一下,分享给大家! Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: ...

  8. Immutable.js 实现原理

    Immutable.js 实现原理 Immutable collections for JavaScript v4.0.0-rc.12 released on Oct 31, 2018 https:/ ...

  9. 使用OnPush和immutable.js来提升angular的性能

    angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码 <div> {{hello()}} </div> 则每次变化检测都会执行hello函数,如果hello函数 ...

随机推荐

  1. .Net 中通用的FormatString格式符整理

    格式化日期和数字的字符串经常要用到这个, 就把帮助里面的东西大概整理了一些列在这里了. 下表描述了用来格式化 DateTime 对象的标准格式说明符.格式说明符 名称 说明 d 短日期模式 显示由与当 ...

  2. 小程序基于疼讯qcloud的nodejs开发服务器部署

        腾讯,疼讯,很疼. 请慎重看腾讯给出的文档,最好做一个笔记. 我只能说我能力有限,在腾讯云小程序的文档中跳了n天. 最后还是觉得记录下来,以防止我的cpu过载给烧了. 此文档是对<小程序 ...

  3. 源码剖析Django REST framework的认证方式及自定义认证

    源码剖析Django REST framework的认证方式 在前面说过,请求到达REST framework的时候,会对request进行二次封装,在封装的过程中会对客户端发送过来的request封 ...

  4. linux下expect命令实现批量ssh免密

    有时候我们需要批量发送ssh命令给服务器,但是有可能有些服务器是新加入的,还没有配置ssh免密,这个时候就会提示我们输入yes/no 或者password等,expect脚本命令就是用于在提示这些的时 ...

  5. Eclipse创建一个JAVA WEB项目

    继上一篇博客,Eclipse的Tomcat已经配置好了,现在我们开始创建web项目. 1.打开Eclipse,选择菜单栏的file>New>Dynamic Web Project 弹出窗口 ...

  6. 2810:完美立方-poj

    2810:完美立方 总时间限制:  1000ms 内存限制:  65536kB 描述 形如a3= b3 + c3 + d3的等式被称为完美立方等式.例如123= 63 + 83 + 103 .编写一个 ...

  7. Docker 三剑客之 Docker Swarm

    上一篇:Docker 三剑客之 Docker Compose 阅读目录: Docker Machine 创建 Docker 主机 Docker Swarm 配置集群节点 Docker Service ...

  8. 使用Navicat导入.csv文件(过程和注意点)

    1.创建一个数据库,右键点击表,选择导入向导. 2.在跳出的弹窗中选择.CSV文件,点击下一步 3.选择文件来源和编码规格,点击下一步 如果发现上传后中文出现乱码请使用10008这个编码规则 4.选择 ...

  9. 享元模式(Flyweight)

    享元模式(Flyweight) 享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. FlyWeightFactory负责创建和管理享元单元, ...

  10. Ceph luminous 安装配置

    Ceph luminous 安装配置 #环境centos7 , Ceph V12 openstack pike 与 ceph 集成 http://www.cnblogs.com/elvi/p/7897 ...