Immutable.js je zastrašujući. Evo kako započeti.

Čuli ste da biste trebali koristiti Nepromjenjiv. Znate da biste trebali, ali niste sasvim sigurni zašto. A kad odete na dokumente, prvi isječak koda izgleda ovako:

identity(value: T): T

Pomisliš: Ne ... možda drugi put.

Dakle, evo jednostavnog i brzog uvoda za početak rada s Immutableom. Nećete požaliti:

U tvrtki Pilcro uveli smo Immutable u svoje aplikacije prije otprilike 12 mjeseci. Bila je to jedna od najboljih odluka koje smo donijeli. Naše su aplikacije sada puno čitljivije, robusnije, bez grešaka i predvidljive.

Osnove

Pretvaranje u Nepromjenjivo

U normalnom JavaScript-u poznajemo dvije uobičajene vrste podataka: Object{} i Array[] .

Da biste ih preveli u Nepromjenjive:

  • Objekt {}postaje MapMap({})
  • Polje[] postaje ListList([])

Da bismo pretvorili uobičajeni JavaScript u Nepromjenjiv, možemo koristiti funkcije Map , List ili fromJS koje Immutable nudi:

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);

fromJSje korisna funkcija koja pretvara ugniježđene podatke u Nepromjenjive. Stvara Mapsi Listsu pretvorbi.

Pretvaranje iz Nepromjenjivog u uobičajeni JavaScript

Vrlo je jednostavno vratiti podatke iz Nepromjenjivog u obični stari JavaScript. Vi samo pozivate .toJS()metodu na svom Nepromjenjivom objektu.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Uvodna napomena: Strukture podataka treba smatrati NITI običnim JavaScriptOM ILI Nepromjenjivim.

Počnite koristiti Nepromjenjivo

Prije objašnjavanja zašto je Immutable tako koristan, evo tri jednostavna primjera gdje vam Immutable može odmah pomoći.

1. Dobivanje ugniježđene vrijednosti iz objekta bez provjere da li postoji

Prvo u normalnom JavaScript-u:

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'

A sada u Nepromjenjivom:

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

U gornjim primjerima normalni JavaScript kôd baca pogrešku, dok onaj Nepromjenjivi ne.

To je zato što koristimo getIn()funkciju za dobivanje ugniježđene vrijednosti. Ako staza ključa ne postoji (to jest, objekt nije strukturiran onako kako ste mislili), vraća se nedefinirano, a ne baca pogrešku.

Ne trebate provjeravati nedefinirane vrijednosti sve dolje u ugniježđenoj strukturi kao što biste to radili u uobičajenom JavaScript-u:

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

Ova jednostavna značajka čini vaš kod mnogo čitljivijim, manje rječitim i puno robusnijim.

2. Lančane manipulacije

Prvo u normalnom JavaScript-u:

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

Sada u Nepromjenjivom:

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'];

Budući da List.push()vraća rezultat operacije, sljedeću operaciju možemo "povezati" ravno na nju. U normalnom JavaScript-u pushfunkcija vraća duljinu novog polja.

Ovo je vrlo jednostavan primjer ulančavanja, ali ilustrira stvarnu snagu Nepromjenjivog.

To vas oslobađa za obavljanje svih vrsta manipulacija podacima na način koji je funkcionalniji i sažetiji.

Uvodna napomena: Operacije na nepromjenjivom objektu vraćaju rezultat operacije.

3. Nepromjenjivi podaci

Napokon se zove Nepromjenjiv, pa moramo razgovarati o tome zašto je to važno!

Recimo da stvorite Nepromjenjivi objekt i ažurirate ga - s Immutabilnim se početna struktura podataka ne mijenja. Nepromjenjiv je. (ovdje malo!)

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.