【译】Immutable.js很吓人？我来告诉你如何开始

原文 - Immutable.js is intimidating. Here’s how to get started.

你从许多渠道中了解到，你应该使用Immutable。你也想去使用，可是不肯定为何去使用。而当你去看官方 文档 时，映入你眼帘的第一个代码片断是：

identity<T>(value: T): T
复制代码

你会想：呃...仍是算了吧。

这是一篇简单、快速帮你入门Immutable的文章，绝对不会让你失望。

一年前，在Pilcro，我向开发团队推荐了Immutable。迄今为止，这被证实是最明智的决定。咱们的应用如今具备更强的可读性、更好的健壮性、更少的错误以及可预测性。

基础

标准js数据格式转换成Immutable

在js中，咱们知道两种常见的数据类型：Object{}和Array[]。Immutable的思路:

• Object{} 变为 MapMap({})
• Array[] 变为 ListList([])

更具体点，是使用Immutable提供的Map 、List和fromJS函数：

import { Map, List, fromJS } from 'immutable';
// 原生 js 数据类型
const person = {
  name: 'Will',
  pets: ['cat', 'dog']
};
// 等同于 Immutable 中的:
const immutablePerson = Map({
  name: 'Will',
  pets: List(['cat', 'dog'])
});
// 或者 ...
const immutablePerson = fromJS(person);
复制代码

formJS是个很是有用的函数，它会把嵌套的数据结构转换成Immutable对象。它在转换的过程当中会根据数据自行建立Maps和Lists。

Immutable转换为标准js数据格式

要想从Immutable对象中取回你的标准js数据格式，你只须要调用Immutable对象的toJS函数便可：

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });
const person = immutablePerson.toJS();
console.log(person); // 打印 { name: 'Will' };
复制代码

数据结构应该被认为是原生js数据结构，或者Immutable对象

开始使用Immutable

在解释为何Immutable颇有用以前，先给出三个代码片断告诉你Immutable如何去帮助你。

从嵌套的数据结构中获取不存在的数据值

首先，原生js：

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;
console.log(goodName); // 打印 Will
const badName = data.my.lovely.name;
// throws error: 'Cannot read name of undefined'
// 'lovely' 属性不存在，因此报错
复制代码

再来看看Immutable:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);
console.log(goodName); // 打印 Will
const badName = data.getIn(['my', 'lovely', 'name']);
console.log(badName); // 打印 undefined - 不会抛出异常
复制代码

上面的例子中，原生js代码会抛出异常，可是Immutable并不会。

这是由于咱们使用getIn()函数去获取嵌套的数据值。数据值的key路径不存在（换句话说，对象并不是是你指望的嵌套结构），它仅仅返回undefined并不会抛出异常。

你没必要像下面这样嵌套的去判断数据值是否存在：

if (data && data.my && data.my.nested && data.my.nested.name) { ...
复制代码

这个简单的特性，让你的代码可读性更好，代码简洁而且健壮性更好。

链式操做

首先，原生js：

const pets = ['cat', 'dog'];
pets.push('goldfish');
pets.push('tortoise');
console.log(pets); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];
复制代码

再来看看Immutable:

const pets = List(['cat', 'dog']);
const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // 打印 ['cat', 'dog'];
console.log(finalPets.toJS()); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];
复制代码

由于List.push返回操做以后的结果，咱们能够在后面继续链式操做，而原生数组的push函数返回操做以后新数组的长度。

这是一个很是简单的链式操做例子，可是它说明了Immutable的强大功能。

这可让你以函数式和简洁的方式去处理各类数据操做。

Immutable对象的操做老是返回操做以后的结果

不可变数据

它被称为不可变，因此咱们须要讨论一下为何这很重要。

好比你使用Immutable建立一个对象并更新了它，可是它初始数据结构仍然保持不变。这就是不可变。

const data = fromJS({ name: 'Will' });
const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // 打印 'Will'
console.log(newNameData.get('name')); // 打印 'Susie'
复制代码

在这个例子中，咱们能够看到初始的data对象并无改变。这就意味着当你更新它的name属性值为Susie时，并不会伴随着不可预知的行为。

这个简单的特性是很是强大的，特别是当你去搭建一些复杂的应用。这是Immutable的核心。

在Immutable对象上的操做并不会改变原对象，而是建立一个新对象

为何Immutable颇有用

脸书的一些工程师在文档首页整理了一些使用Immutable的益处，可是有点绕。如下是我整理的一些为何你应该开始使用Immutable：

你的数据结构是可预测的

由于你的数据结构是Immutable，你对本身的数据结构如何操做一清二楚。在复杂web应用中，这意味当你针对UI 的数据结构进行很微小的改动时，不会发生额外的、使人哭笑不得的从新渲染问题。

数据操做的健壮性

经过使用Immutable去操做数据，你的这些操做很难会出现错误。Immutable为你作了许多脏活、累活：捕获异常，提供默认值和开箱即用的建立嵌套数据结构。

简洁而且可读性的代码

一开始你可能对Immutable的函数式设计很困惑，但一旦你掌握了，链式函数调用会让你的代码更少、可读性更好。这对团队保持代码的一致性颇有帮助。

后续学习

不能否认，Immutable的学习曲线不是很平滑，可是很是值得。Get started的学习只是个开胃菜。

如下是以前提到的一些注意事项。若是你铭记于心，使用Immutable就如在水中的鸭子般轻松。

• 数据结构应该被认为是原生js数据结构，或者Immutable对象
• Immutable对象的操做老是返回操做以后的结果
• 在Immutable对象上的操做并不会改变原对象，而是建立一个新对象

祝你好运！

若是你喜欢这篇文章，请去原文点个赞并分享给其余人，也欢迎访问咱们公司网站Pilcro.com。Pilcro是一个品牌设计软件。