Immutability and Javascript - Nadia Miętkiewicz

Immutability & Javascript
Nadia Miętkiewicz / Visuality

Why this talk?
● immutable.js is included by default in react-boilerplate
● that redux-form bug...

that redux-form bug
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);
import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
const Form = (props) => (
<form onSubmit={props.handleSubmit}>
<Field name="email" component="input" />
<button type="submit">Sign in</button>
</form>
);
export default reduxForm({
form: 'signIn',
})(Form);

The case for immutability
Much of what makes application development difficult is
tracking mutation and maintaining state.

Muttable
const item = {
shape: 'square',
position: 'A',
};

Muttable
const item = {
shape: 'square',
position: 'A',
};
item.position = 'B';

Immuttable
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};

Prestige (2006)
hughJackman.position = 'balcony';

Prestige (2006)
const hughJackmanClone = {
...hughJackman,
position: 'balcony',
};

const item = {
shape: 'human',
position: 'A',
};
Mutator methods

Mutator methods
const item = {
shape: 'human',
position: 'A',
};
teleport(item, 'B');
/***********************************************/
YOLO
¯_(ツ)_/¯
/***********************************************/
}

The Fly (1986)
items = getCapsuleContents(); // should be [ ‘human’ ]
subject.shape = items.join();
}

The Fly (1986)
items = getCapsuleContents(); // is [ ‘human’, ‘fly’ ]
subject.shape = items.join();
}

What about memory
consumption?

Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};

Memory consumption
const item = {
shape: 'square',
position: 'A',
};
const item2 = {
...item,
position: 'B',
};
const item3 = {
...item2,
position: 'C',
};
const item4 = {
...item,
position: 'D',
};
const item5 = {
...item,
position: 'E',
};
const item6 = {
...item2,
position: 'F',
};

Prestige (2016)
const hughJackmanClone = {
...hughJackmanOriginal,
position: 'balcony',
};
drown(hughJackmanOriginal);

Map
import { Map } from 'immutable';
const item = Map({
shape: 'square',
position: 'A',
});
const item2 = item.set('position', 'B');
const item = {
shape: 'square',
position: 'A',
};

List
import { List } from 'immutable';
const items = List([
'apple',
'banana',
]);
const items2 = item.push('orange');
const items = [
'apple',
'banana',
];
items.push('orange');

make immutable
import { fromJS } from 'immutable';
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } });
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ] } } }

make mutable
import { Map, List } from 'immutable';
const deep = Map({ a: 1, b: 2, c: List([ 3, 4, 5 ]) });
console.log(deep.toObject()); // { a: 1, b: 2, c: List [ 3, 4, 5 ] }
console.log(deep.toArray()); // [ 1, 2, List [ 3, 4, 5 ] ]
console.log(deep.toJS()); // { a: 1, b: 2, c: [ 3, 4, 5 ] }

Where to use?
● For the entire Redux state tree
● Your selectors should return Immutable.JS objects
● Never use toJS() in mapStateToProps
● Always in Smart Components (containers)
● Never in Dumb Components
● Wrap Dumb Components in a HOC to convert the props

Immutability and Javascript - Nadia Miętkiewicz

More Related Content

What's hot (18)

Similar to Immutability and Javascript - Nadia Miętkiewicz (20)

More from Visuality (20)

Recently uploaded (20)

Immutability and Javascript - Nadia Miętkiewicz