【譯】Immutable.js很嚇人？我來告訴你如何開始

zhCN_超發表於2018-05-02
JS

【譯】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是一個品牌設計軟體。

相關文章