The Immutable.js Record() allows you to model your immutable data much like you would model data with native Javascript classes or objects. It differs from native classes because it cannot be mutated after it's creation and it always has a default value. It's an excellent construct in which to piece together your stores, be them Flux or some other storage implementation. Let's quickly create an Immutable Record().

Create a Record class:

let TodoRecord = Immutable.Record({
id: (+new Date() + Math.floor(Math.random() * 999999)).toString(36),
title: "Default Title",
items: Immutable.List(),
completed: false
});

Inside the Recode class, you can define the default value. But you cannot add any method!

New a instance:

// Create a new instance
let imTodo = new TodoRecord({
title: "New Title",
items: Immutable.List(),
completed: false
});

Update and get an value:

// Update the title
imTodo = imTodo.updateIn(['title'], val => "Immutable");
console.log(imTodo.get('title'));

Read the value:

console.log(imTodo.title);

let items = imTodo.items;
let newItem = "New Item";
let updatedItems = imTodo.push(newItem); let newTodo = imTodo.set("items", updatedItems );

As you can see, the advantage by using Record instread of Map is that we can access the value directly by using:

imTodo.title;

instead of:

imTodo.get("title") //Of course this also works

[Immutable,js] Immutable.Record() as data models的更多相关文章

  1. Redux进阶(Immutable.js)

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

  2. [Immutable.js] Transforming Immutable Data with Reduce

    Immutable.js iterables offer the reduce() method, a powerful and often misunderstood functional oper ...

  3. [Immutable.js] Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

    Immutable.js offers the fromJS() method to build immutable structures from objects and array. Object ...

  4. [Javascript] Manage Application State with Immutable.js

    Learn how Immutable.js data structures are different from native iterable Javascript data types and ...

  5. 大话immutable.js

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

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

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

  7. [Javascript] Creating an Immutable Object Graph with Immutable.js Map()

    Learn how to create an Immutable.Map() through plain Javascript object construction and also via arr ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. 多路复用I/O epoll()

    epoll 是Linux内核中的一种可扩展IO事件处理机制,最早在 Linux 2.5.44内核中引入,可被用于代替POSIX select 和 poll 系统调用,并且在具有大量应用程序请求时能够获 ...

  2. js中indexof()简单使用

    indexOf()方法返回某个指定的字符串值在字符串中首次出现的位置. stringObject.indexOf(searchvalue,fromindex):indexOf()方法对大小写敏感如果要 ...

  3. 应用highcharts做直观数据统计

    最近在看上了统计类的东东,发现以前端图表神器:highcharts Highcharts是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯Js图表库,Highcharts支持的图表类型有直线 ...

  4. Windows命令行(DOS命令)教程 -1 (转载) http://www.pconline.com.cn/pcedu/rookie/basic/10111/15325.html

    一.命令行简介 命令行就是在Windows操作系统中打开DOS窗口,以字符串的形式执行Windows管理程序. 在这里,先解释什么是DOS? DOS--Disk Operation System 磁盘 ...

  5. Java数据库缓存思路

    为什么要用缓存?如果问这个问题说明你还是新手,数据库吞吐量毕竟有限,每秒读写5000次了不起了,如果不用缓存,假设一个页面有100个数据库操作,50个用户并发数据库就歇菜,这样最多能支撑的pv也就50 ...

  6. js、java传值编码

    一.请求使用post方法不需要考虑编码问题.二.前后台统一编码,支持中文,不考虑编码:tomcat utf-8编码三.前后台编码不统一 $.ajax({                url : &q ...

  7. 如何修改UIButton按下后默认的蓝色效果

    其实有两个简单方法:1.修改xib属性检查器Highlight Tint的值: 2.通过代码修改:btn.tintColor=[UIColor grayColor];或者[btn setTintCol ...

  8. django web 中添加超链接

    django web 中添加不传参的超链接的方法如下: html: 在web中的超链接中加入一下url <a href="{% url 'app_name.views.url_func ...

  9. iOS -多字体混合

    label 加下划线 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 300, 100)];    label.b ...

  10. android添加edittext后布局就不好用

    在布局添加控件手动添加还是拖的添加,添加edittext后布局就不好用,其他控件好用,然后就说下面这段话 Exception raised during rendering: java.lang.Sy ...