Az Immutable.js félelmetes. Így kezdheti el.

Hallja, hogy az Immutable-ot kell használnia. Tudod, hogy kellene, de nem vagy egészen biztos abban, miért. És amikor meglátogatja a dokumentumokat, az első kódrészlet így néz ki:

identity(value: T): T

Azt hiszed: Nah ... talán máskor.

Tehát itt van egy egyszerű és gyors bevezetés az Immutable használatának megkezdéséhez. Nem fogja megbánni:

A Pilcro-nál körülbelül 12 hónappal ezelőtt vezettük be az Immutable alkalmazást. Ez volt az egyik legjobb döntés, amelyet meghoztunk. Alkalmazásaink ma már sokkal olvashatóbbak, robusztusabbak, hibamentesebbek és kiszámíthatóbbak.

Az alapok

Konvertálás megváltoztathatatlanná

A normál JavaScript-ben két általános adattípust ismerünk: Object{} és Array[] .

Ha ezeket lefordíthatatlanná szeretné fordítani:

  • Tárgy {}Map leszMap({})
  • A tömbből List[] leszList([])

A normál JavaScript konvertálhatatlanná alakításához használhatjuk a Map , List vagy fromJS függvényeket, amelyeket az Immutable nyújt:

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

fromJSegy hasznos függvény, amely a beágyazott adatokat átválthatóvá alakítja. Létrehoz Mapsés Listsa megtérésben.

Vissza konvertálása az Immutable-ból normál JavaScript-be

Nagyon egyszerű az adatok visszavétele az Immutable-ból a sima régi JavaScript-be. Csak meghívja a .toJS()metódust az Immutable objektumán.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Keynote: Az adatstruktúrákat VAGY egyszerű Java -ként vagy megváltoztathatatlannak kell tekinteni.

Kezdje el használni az Immutable alkalmazást

Mielőtt elmagyaráznánk, miért olyan hasznos az Immutable, íme három egyszerű példa arra, hogy az Immutable hogyan segíthet azonnal.

1. Beágyazott érték beszerzése egy objektumból anélkül, hogy ellenőriznénk, létezik-e

Első a normál JavaScript-ben:

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'

És most a Megváltozhatatlanban:

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

A fenti példákban a normál JavaScript kód hibát dob, míg az Immutable nem.

Ennek oka, hogy a getIn()függvény segítségével beágyazott értéket kapunk. Ha a kulcs elérési útja nem létezik (vagyis az objektum nem úgy van felépítve, ahogy gondoltad), akkor nem definiálva tér vissza, hanem hibát dob.

A beágyazott struktúrában nem kell meghatározatlan értékeket keresnie, mint a normál JavaScriptben:

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

Ez az egyszerű szolgáltatás sokkal könnyebben olvashatóvá, kevésbé szövegessé és robusztusabbá teszi a kódot.

2. Láncolásos manipulációk

Első a normál JavaScript-ben:

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

Most a Megváltozhatatlanban:

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

Mivel List.push()a művelet eredményét adja vissza, a következő műveletet közvetlenül rá tudjuk láncolni. Normál JavaScriptben a pushfüggvény visszaadja az új tömb hosszát.

Ez nagyon egyszerű példa a láncolásra, de szemlélteti az Immutable valódi erejét.

Ez felszabadít mindenfajta adatkezelésre, funkcionálisabb és tömörebb módon.

Keynote: A megváltoztathatatlan objektumon végzett műveletek visszaadják a művelet eredményét.

3. Változhatatlan adatok

Végül is megváltoztathatatlannak hívják, ezért beszélnünk kell arról, hogy ez miért fontos!

Tegyük fel, hogy létrehoz egy megváltoztathatatlan objektumot, és frissíti azt - az Immutable funkcióval a kezdeti adatszerkezet nem változik. Megváltoztathatatlan. (itt kisbetű!)

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.