原文 - 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是一個品牌設計軟體。