Immutable.js er skræmmende. Sådan kommer du i gang.

Du hører, at du skal bruge Immutable. Du ved, du burde, men du er ikke helt sikker på hvorfor. Og når du går til dokumenterne, ser det første kodestykke sådan ud:

identity(value: T): T

Du tænker: Nej ... måske en anden gang.

Så her er en enkel og hurtig introduktion til at komme i gang med Immutable. Du vil ikke fortryde det:

Hos Pilcro introducerede vi Immutable i vores applikationer for ca. 12 måneder siden. Det har været en af ​​de bedste beslutninger, vi har taget. Vores apps er nu meget mere læsbare, robuste, fejlfrie og forudsigelige.

Det grundlæggende

Konvertering til uforanderlig

I normal JavaScript kender vi to almindelige datatyper: Objekt{} og Array[] .

For at oversætte disse til uforanderlig:

  • Objekt {}bliver kortMap({})
  • Array[] bliver listeList([])

For at konvertere normale JavaScript i Immutable, kan vi bruge de Kort , List, eller fromJS funktioner, Immutable giver:

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

fromJSer en nyttig funktion, der konverterer indlejrede data til Uforanderlig. Det skaber Mapsog Listsi konverteringen.

Konvertering tilbage fra uforanderlig til normal JavaScript

Det er meget simpelt at få dine data tilbage fra Uforanderlig til almindelig gammel JavaScript. Du kalder bare .toJS()metoden på dit uforanderlige objekt.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Keynote: Datastrukturer skal betragtes som enten almindelig JavaScript ELLER Uforanderlig.

Begynd at bruge Immutable

Før du forklarer, hvorfor Immutable er så nyttigt, er her tre enkle eksempler på, hvor Immutable kan hjælpe dig med det samme.

1. Få en indlejret værdi fra et objekt uden at kontrollere, om den findes

Først i normal JavaScript:

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'

Og nu i uforanderlig:

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

I ovenstående eksempler kaster den normale JavaScript-kode en fejl, mens den uforanderlige ikke gør det.

Dette skyldes, at vi bruger getIn()funktionen til at få en indlejret værdi. Hvis nøglestien ikke findes (dvs. objektet er ikke struktureret, som du troede), returnerer det udefineret snarere end at kaste en fejl.

Du behøver ikke tjekke for udefinerede værdier helt ned i den indlejrede struktur, som du ville gjort i normal JavaScript:

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

Denne enkle funktion gør din kode meget mere læsbar, mindre ordrig og meget mere robust.

2. Kædemanipulationer

Først i normal JavaScript:

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

Nu i uforanderlig:

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

Fordi vi List.push()returnerer resultatet af operationen, kan vi "kæde" den næste operation direkte på den. I normal JavaScript pushreturnerer funktionen længden af ​​det nye array.

Dette er et meget simpelt eksempel på sammenkædning, men det illustrerer den virkelige kraft ved uforanderlig.

Dette frigør dig til at udføre alle mulige datamanipulationer på en måde, der er mere funktionel og mere kortfattet.

Keynote: Operationer på et uforanderligt objekt returnerer resultatet af operationen.

3. Uforanderlige data

Det kaldes trods alt uforanderligt, så vi er nødt til at tale om, hvorfor dette er vigtigt!

Lad os sige, at du opretter et immutabelt objekt, og du opdaterer det - med Immutable ændres den oprindelige datastruktur ikke. Det er uforanderligt. (små bogstaver her!)

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

Læringskurven er utvivlsomt vanskelig med Immutable, men virkelig det værd. Kom bare i gang med at lege rundt.

Her er hovedtasterne, der blev bemærket, da vi gik igennem. Hvis du kan holde disse i tankerne, vil du tage til Immutable som en ænder til vand!

  1. Datastrukturer skal betragtes som enten almindelig JavaScript ELLER Uforanderlig.
  2. Operationer på et uforanderligt objekt returnerer resultatet af operationen.
  3. Handlinger på et uforanderligt objekt ændrer ikke selve objektet, men opretter i stedet et nyt objekt.

Held og lykke!

Hvis du kunne lide denne historie, tak? og del med andre. Tjek også mit firma pilcro.com. Pilcro er brandsoftware til G-Suite - til marketingfolk og brandbureauer.