The key to being productive with Immutable JS is understanding how to update values that are nested. Using setIn you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use updateIn instead. updateIn accepts the same path lookups as setIn, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

const {Map, List, fromJS} = Immutable;

const state = fromJS({
home: {
loading: false,
messages: [
{
type: 'info',
message: 'Welcome to our website'
}
]
}
}); // Add a new message with updateIn
const updated = state.updateIn(['home', 'messages'], msgs => {
return msgs.push(Map({type: 'info', message: 'Hi there!'}));
});
console.log(updated.getIn(['home', 'messages']).toJS()); // Update a message in a known path
const updated2 = state.setIn(['home', 'messages', , 'message'], 'new message!');
console.log(updated2.getIn(['home', 'messages']).toJS());

[Immutable.js] Updating nested values with ImmutableJS的更多相关文章

  1. immutable.js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

  2. Immutable.js尝试(node.js勿入)

    最近做一些复杂html常常需要在页面做一些数据处理,常常在想如果 js有list 这种数据结构多少,今天逛github时 发现有Immutable.js 这个项目https://github.com/ ...

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

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

  4. [Immutable.js] Exploring Sequences and Range() in Immutable.js

    Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to ...

  5. [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types

    Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable ...

  6. [Immutable.js] Differences between the Immutable.js Map() and List()

    The Immutable.js Map() is analogous to a Javascript Object or Hash since it is comprised of key-valu ...

  7. Redux进阶(Immutable.js)

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

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

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

  9. Immutable.js 实现原理

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

随机推荐

  1. hello world! hello cnbog

    第一次开通博客,以后见证我的成长吧!

  2. PHP生成二维码方法

    <?php //先下载一份phpqrcode类,下载地址http://down.51cto.com/data/780947require_once("phpqrcode/phpqrco ...

  3. [NOI.AC#40]Erlang

    链接 题解 显然,最多抽2个集合 如果一直抽一个,前提是该集合有重复的,答案是不同元素的个数+1 如果抽两个,那么最坏情况下,在一个集合中抽到某一个数的次数是这个集合不同元素的个数(因为抽不到重复的) ...

  4. Vue的学习--怎么在vue-cli中写网页

    vue.min.js和vue-cli的区别和联系我现在还是没有太清楚,大概是还没搞清楚export default和new Vue的区别,先浅浅记录一下怎么“用vue-cli来写网页”. “vue-c ...

  5. servlet、filter、listener继承的基类和获得作用域的方式

    一.servlet: 1.servlet属于j2ee的组件,构建servlet的web project不需要导入项目框架jar包 2.servlet的体系结构:  在j2ee API中,提供给serv ...

  6. GIS学习 Geoserver使用添加、删除、查询地图中的POI

    geoserverwfs:Querywfs:Deletewfs:Updatewfs:Insert  在geoserver自定义的地图中通过geoserver wfs 查询,删除,添加相关的POI. 相 ...

  7. 整理wmic使用,不重启变环境变量 .

    整理wmic使用,不重启变环境变量 . 利用wmic修改是直接生效的:(e:\tools 是新添加的目录) wmic ENVIRONMENT where "name='path' and u ...

  8. gerrit-申请id跟本地配置

    OpenID 是一个以用户为中心的数字身份识别框架,它具有开放.分散.自由等特性. 什么是gerrit? 看 了网上的介绍,感觉所谓的gerrit就是一个基于web实现代码管理的服务器.Gerrit ...

  9. 使用solr的DIHandler 构建mysql大表全量索引,内存溢出问题的解决方法

    solr官方给出的解决方式是: DataImportHandler is designed to stream row one-by-one. It passes a fetch size value ...

  10. vue 键盘回车事件导致页面刷新的问题,路由多了一个问号

    问题: <el-form @submit.native.prevent> <el-form-item > <el-input @keyup.enter.native=&q ...