Immutable.js ist einschüchternd. Hier erfahren Sie, wie Sie beginnen.

Sie hören, dass Sie Immutable verwenden sollten. Sie wissen, dass Sie sollten, aber Sie sind sich nicht ganz sicher, warum. Und wenn Sie zu den Dokumenten gehen, sieht der erste Codeausschnitt folgendermaßen aus:

identity(value: T): T

Sie denken: Nein ... vielleicht ein anderes Mal.

Hier ist eine einfache und schnelle Einführung, um Ihnen den Einstieg in Immutable zu erleichtern. Sie werden es nicht bereuen:

Bei Pilcro haben wir Immutable vor ungefähr 12 Monaten in unsere Anwendungen eingeführt. Es war eine der besten Entscheidungen, die wir getroffen haben. Unsere Apps sind jetzt viel lesbarer, robuster, fehlerfreier und vorhersehbarer.

Die Grundlagen

Umwandlung in unveränderlich

In normalem JavaScript kennen wir zwei gängige Datentypen: Object{} und Array[] .

Um diese in unveränderlich zu übersetzen:

  • Objekt {}wird KarteMap({})
  • Array[] wird zu ListList([])

So konvertieren normale JavaScript in Immutable können wir die Verwendung der Karte , Liste, oder fromJS Funktionen dass Immutable bietet:

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

fromJSist eine nützliche Funktion, die verschachtelte Daten in unveränderliche Daten konvertiert. Es schafft Mapsund Listsin der Konvertierung.

Zurückkonvertieren von unveränderlichem zu normalem JavaScript

Es ist sehr einfach, Ihre Daten von unveränderlich auf einfaches altes JavaScript zurückzusetzen. Sie rufen einfach die .toJS()Methode für Ihr unveränderliches Objekt auf.

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });const person = immutablePerson.toJS();
console.log(person); // prints { name: 'Will' };
Keynote: Datenstrukturen sollten entweder als einfaches JavaScript oder als unveränderlich betrachtet werden.

Starten Sie die Verwendung von Immutable

Bevor Sie erklären, warum Immutable so nützlich ist, finden Sie hier drei einfache Beispiele, wo Immutable Ihnen sofort helfen kann.

1. Abrufen eines verschachtelten Werts von einem Objekt, ohne zu überprüfen, ob es vorhanden ist

Zuerst in normalem 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'

Und jetzt in unveränderlich:

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

In den obigen Beispielen gibt der normale JavaScript-Code einen Fehler aus, der unveränderliche nicht.

Dies liegt daran, dass wir die getIn()Funktion verwenden, um einen verschachtelten Wert zu erhalten. Wenn der Schlüsselpfad nicht vorhanden ist (dh das Objekt ist nicht so strukturiert, wie Sie es gedacht haben), wird undefiniert zurückgegeben, anstatt einen Fehler auszulösen.

Sie müssen nicht wie in normalem JavaScript in der verschachtelten Struktur nach undefinierten Werten suchen:

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

Diese einfache Funktion macht Ihren Code viel lesbarer, weniger wortreich und viel robuster.

2. Verkettungsmanipulationen

Zuerst in normalem JavaScript:

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

Jetzt in unveränderlich:

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

Da List.push()das Ergebnis der Operation zurückgegeben wird, können wir die nächste Operation direkt darauf „verketten“. In normalem JavaScript gibt die pushFunktion die Länge des neuen Arrays zurück.

This is a very simple example of chaining, but it illustrates the real power of Immutable.

This frees you up to do all sorts of data manipulation in a manner that is more functional and more concise.

Keynote: Operations on an Immutable object return the result of the operation.

3. Immutable data

It’s called Immutable after all, so we need to talk about why this is important!

Let’s say you create an Immutable object and you update it — with Immutable, the initial data structure is not changed. It is immutable. (lower case here!)

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.