Immutable.js Spickzettel

Immutable.js stellt persistent unveränderliche Datenstrukturen für JavaScript bereit und optimiert die Änderungserkennung in React.

Unveränderliche Maps (Key-Value-Objekte)

import { Map } from 'immutable';

const user = Map({ name: 'Alice', age: 30 });

// Accessing values
user.get('name');        // "Alice"
user.has('age');         // true

// Immutably updating (returns new Map instance)
const updated = user.set('age', 31);
const removed = user.delete('age');
const merged = user.merge({ role: 'admin', age: 32 });

// Converting back to plain JavaScript object
user.toJS();             // { name: "Alice", age: 30 }

---

Unveränderliche Listen (Arrays)

import { List } from 'immutable';

const numbers = List([1, 2, 3]);

numbers.get(0);          // 1
const appended = numbers.push(4);    // List [1, 2, 3, 4]
const prepended = numbers.unshift(0);// List [0, 1, 2, 3]
const filtered = numbers.filter(n => n > 1);
const mapped = numbers.map(n => n * 2);

---

Verschachtelte Aktualisierungen (Deep Nested Updates)

import { fromJS } from 'immutable';

const state = fromJS({
  user: {
    profile: {
      location: 'San Francisco'
    }
  }
});

// Deep access
state.getIn(['user', 'profile', 'location']); // "San Francisco"

// Deep update
const nextState = state.setIn(['user', 'profile', 'location'], 'Tokyo');

// Deep update with function
const incremented = state.updateIn(['stats', 'views'], 0, v => v + 1);

---

Verwandte Spickzettel

• Redux
• React