Immutable.js menakutkan. Inilah cara untuk memulakan.

Anda mendengar bahawa anda mesti menggunakan Immutable. Anda tahu anda harus, tetapi anda tidak pasti mengapa. Dan apabila anda pergi ke dokumen, coretan kod pertama kelihatan seperti ini:

identity(value: T): T

Anda fikir: Tidak ... mungkin lain kali.

Jadi, inilah pengenalan yang mudah dan pantas untuk memulakan anda dengan Immutable. Anda tidak akan menyesal:

Di Pilcro, kami memperkenalkan aplikasi Immutable ke dalam aplikasi kami kira-kira 12 bulan yang lalu. Ini adalah salah satu keputusan terbaik yang telah kami buat. Aplikasi kami kini jauh lebih mudah dibaca, mantap, bebas bug dan boleh diramalkan.

Asas-asas

Menukar menjadi Tidak Berubah

Dalam JavaScript biasa, kita tahu dua jenis data umum: Objek{} dan Array[] .

Untuk menterjemahkannya menjadi tidak berubah:

  • Objek {}menjadi PetaMap({})
  • Array[] menjadi SenaraiList([])

Untuk menukar JavaScript biasa menjadi tidak berubah, kita dapat menggunakan fungsi Peta , Daftar, atau dariJS yang disediakan oleh Immutable:

import { Map, List, fromJS } from 'immutable';
// Normal Javascript
const person = { name: 'Will', pets: ['cat', 'dog']};
// To create the equivalent in Immutable:
const immutablePerson = Map({ name: 'Will', pets: List(['cat', 'dog'])});
// Or ...
const immutablePerson = fromJS(person);

fromJSadalah fungsi berguna yang menukar data bersarang menjadi Tidak berubah. Ini mencipta Mapsdan Listsdalam penukaran.

Menukar kembali dari JavaScript yang tidak berubah ke normal

Sangat mudah untuk mengembalikan data anda dari JavaScript lama kepada yang lama. Anda hanya memanggil .toJS()kaedah pada objek Tidak Berubah.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Nota Utama: Struktur data harus difikirkan sebagai LEBIH JELAS JavaScript biasa atau tidak berubah.

Mula menggunakan Tidak Berubah

Sebelum menerangkan mengapa Immutable sangat berguna, berikut adalah tiga contoh mudah di mana Immutable dapat membantu anda dengan segera.

1. Mendapatkan nilai bersarang dari objek tanpa memeriksa apakah ia ada

Pertama dalam JavaScript biasa:

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;console.log(goodName); // prints Will
const badName = data.my.lovely.name;// throws error: 'Cannot read name of undefined'

Dan sekarang dalam Perubahan:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);console.log(goodName); // prints Will
const badName = data.getIn(['my', 'lovely', 'name']);console.log(badName); // prints undefined - no error thrown

Dalam contoh di atas, kod JavaScript biasa menimbulkan ralat, sedangkan yang tidak berubah tidak.

Ini kerana kita menggunakan getIn()fungsi untuk mendapatkan nilai bersarang. Sekiranya jalan kunci tidak ada (iaitu, objek tidak tersusun seperti yang anda fikirkan), ia kembali tidak ditentukan daripada membuang kesalahan.

Anda tidak perlu memeriksa nilai yang tidak ditentukan sepanjang struktur bersarang seperti yang anda lakukan dalam JavaScript biasa:

if (data && data.my && data.my.nested && data.my.nested.name) { ...

Ciri mudah ini menjadikan kod anda jauh lebih mudah dibaca, kurang ringkas, dan lebih mantap.

2. Manipulasi rantai

Pertama dalam JavaScript biasa:

const pets = ['cat', 'dog'];pets.push('goldfish');pets.push('tortoise');console.log(pets); // prints ['cat', 'dog', 'goldfish', 'tortoise'];

Sekarang dalam Perubahan:

const pets = List(['cat', 'dog']);const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // prints ['cat', 'dog'];
console.log(finalPets.toJS());// prints ['cat', 'dog', 'goldfish', 'tortoise'];

Kerana List.push()mengembalikan hasil operasi, kita dapat "merantai" operasi berikutnya tepat ke atasnya. Dalam JavaScript biasa, pushfungsi mengembalikan panjang array baru.

Ini adalah contoh rantai yang sangat mudah, tetapi ia menggambarkan kekuatan sebenar Immutable.

Ini membebaskan anda untuk melakukan segala jenis manipulasi data dengan cara yang lebih berfungsi dan lebih ringkas.

Ucapan Utama: Operasi pada objek yang tidak berubah mengembalikan hasil operasi.

3. Data tidak berubah

Lagipun ia dinamakan Tidak Berubah, jadi kita perlu membincangkan mengapa ini penting!

Katakan anda membuat objek Tidak Berubah dan anda mengemas kini - dengan Tidak Berubah, struktur data awal tidak berubah. Ia tidak berubah. (huruf kecil di sini!)

const data = fromJS({ name: 'Will' });const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // prints 'Will'console.log(newNameData.get('name')); // prints 'Susie'

In this example we can see how the original “data” object is not changed. This means that you will not get any unpredictable behaviour when you update the name to “Susie.”

This simple feature is really powerful, particularly when you are building complex applications. It is the backbone of what Immutable is all about.

Keynote: Operations on an Immutable object do not change the object, but instead create a new object.

Why Immutable is useful

The developers at Facebook sum up the benefits on the homepage of the docs, but it’s quite tricky to read. Here is my take on why you should start using Immutable:

Your data structures change predictably

Because your data structures are immutable, you are in charge of how your data structures are operated upon. In complex web applications, this means you don’t get funny re-rendering issues when you change a bit of data that is being accessed for the UI.

Robust data manipulation

By using Immutable to manipulate data structures, your manipulations themselves are much less error-prone. Immutable does a lot of the hard work for you — it catches errors, offers default values, and builds nested data structures out-of-the-box.

Concise readable code

The functional design of Immutable can be confusing at first, but once you get used to it, function chaining makes your code much shorter and more readable. This is great for teams working on the same code base.

Next steps

The learning curve is undeniably tricky with Immutable, but really worth it. Get started just having a play around.

Here are the keynotes that were noted as we went through. If you can keep these in your mind, you will take to Immutable like a duck to water!

  1. Data structures should be thought of as EITHER plain JavaScript OR Immutable.
  2. Operations on an Immutable object return the result of the operation.
  3. Operations on an Immutable object do not change the object itself, but instead create a new object.

Good luck!

If you liked this story, please ? and please share with others. Also please check out my company pilcro.com. Pilcro is brand software for G-Suite — for marketers and brand agencies.