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. git config配置文件 (共有三个配置文件)

    设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...

  2. javascript构造函数+原形继承+作用域扩充

    目前为止我认为这是最佳的声明对象的模式,将今天学到的东西写下 <script type="text/javascript"> function Constructor( ...

  3. FineUI表单验证

    自动编码文本 默认情况下,Label的EncodeText属性为true,会对文本中的HTML进行编码.当然我们也可以设置EncodeText=false,从而将HTML片段赋值给Text属性,请看这 ...

  4. Android -------- API等级

      API等级 Android版本 代号名称(基本上是按ABC命名排序的) 注释说明 1 Android 1.0     2 Android 1.1 Petit Four   3 Android 1. ...

  5. (原)python中import caffe提示no module named google.protobuf.internal

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5993405.html 之前在一台台式机上在python中使用import caffe时,没有出错.但是 ...

  6. U盘启动时无USB-HDD选项的解决方案

    今天在使用一块老板子的时候 发现没有USB-HDD启动项 在启动顺序中只有 USB-ZIP(ZIP)  -FDD(软盘) -CDROM(光驱) 1.插入U盘 2.开机 3.在BIOS中找到Hard D ...

  7. [OpenJudge] 百练2754 八皇后

    八皇后 Description 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * 8个方格),使它们谁也不能被吃掉!这就是著名的八皇后问题. ...

  8. httpcomponents-client-4.3.6 HttpPost的简单使用

    /** * httpcomponents-client-4.3.6 * @author y */ public class HttpUtil { public static String httpPo ...

  9. Android 操作手机内置存储卡中的文件

    场景:需要读取指定文件的内容,此文件是手动存储到手机内置存储卡中的,且手机上不存在SD卡. 对于android通过activity提供的openFileOutput和openFileInput可以直接 ...

  10. BZOJ 1264 基因匹配Match(LCS转化LIS)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1264 题意:给出两个数列,每个数列的长度为5n,其中1-n每个数字各出现5次.求两个数列 ...