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. pycharm不显示工具栏,自动导入模块,格式化代码快捷键

    我们需修改View里面的Toolbar,在前面打上沟,然后就可以显示了 自动导入模块设置:import numpy as np 我们需用鼠标选中numpy,然后在键盘上同时按住Alt+Enter键,通 ...

  2. 今日 SGU 5.6

    SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...

  3. HDU 4107 Gangster

    Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...

  4. JavaWeb学习笔记:Tomcat

    Tomcat 开源的 Servlet 容器. 部署并启动 tomcat server. 解压 apache-tomcat-6.0.16.zip 到一个非中文文件夹下. 配置一个环境变量. java_h ...

  5. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

  6. 【UWP通用应用开发】控件、应用栏

    控件的属性.事件与样式资源 怎样加入控件 加入控件的方式有多种,大家更喜欢以下哪一种呢? 1)使用诸如Blend for Visual Studio或Microsoft Visual Studio X ...

  7. 数据存储值归档Archive

    先比較一下各个数据存储之间的关系: 关于归档.是ios中的shu'j数据存储中的一种数据存储方式.以下了解一下归档中的一个实例: 以下的是父类person #import <Foundation ...

  8. eclipse - 下载网址

    这里面有着非常齐全的eclipse相关资源,而且都是放在网盘里面的,下载也方便 http://www.androiddevtools.cn/

  9. JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  10. ontouch-控件添加ontouch监听事件

    1,代码public class CalculatorViewPager extends ViewPager {}中 package com.android.calculator2; import a ...