1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Map, fromJS } from 'immutable';

const obj1 = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const obj2 = fromJS({
  foo: 1,
  inner: { // Map을 사용하지 않았음
    bar: 10
  }
});

console.log(obj1); // Map {foo: 1, inner: Map, constructor: Object}
console.log(obj2); // Map {foo: 1, inner: Map, constructor: Object}
console.log(obj1.toJS()) // {foo: 1, inner: Object}
console.log(obj.size) // 2
console.log(obj.isEmpty()) // false

1
2
3
4
5
6
7
8
9
10
11
12
import { List } from 'immutable';

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


console.log(arr); // List {size: 2, _origin: 0, _capacity: 2, _level: 5, _root: null…}
console.log(arr.toJS()); // [Object, Object]
console.log(arr.size) // 2
console.log(arr.isEmpty()) // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Map, List } from 'immutable';

const obj = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


const newObj = obj.set('foo',5)
const newArr = arr.set(0, 5)
console.log(newObj.toJS());  // {foo: 5, inner: Object}
console.log(newArr.toJS()); // [5, Object]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Map, List } from 'immutable';

const obj = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


console.log(obj.get('foo')); // 1
console.log(arr.get(1).toJS()); // { bar: 2 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Map, List } from 'immutable';

const obj = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


const newObj = obj.update('foo', value => value + 10 )
console.log(newObj.toJS()) // {foo: 11, inner: Object}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Map, List } from 'immutable';

const obj = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


const newObj = obj.setIn(['inner', 'bar'], 20)
console.log(newObj.toJS()) // {foo: 1, inner: { bar : 20 }}
console.log(newObj.getIn(['inner', 'bar'])) // 20
console.log(newObj.updateIn(["inner", "bar"], value => value + 5).toJS()) // {foo: 1, inner: { bar : 25 }}

const newArr = arr.setIn([0, 'foo'], 30)
console.log(newArr.toJS()) // [{foo : 30}, {bar: 2}]
console.log(newArr.getIn([0, 'foo'])) // 30
console.log(newArr.updateIn([0, "foo"], value => value + 10).toJS()); // [{foo : 40}, {bar: 2}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Map, List } from 'immutable';

const obj = Map({
  foo: 1,
  inner: Map({
    bar: 10
  })
});

const arr = List([
  Map({ foo: 1 }),
  Map({ bar: 2 }),
]);


const newObj = obj.delete('foo');
console.log('newObj',newObj.toJS()) // {inner: Object}

const newArr = arr.delete(0) 
console.log('newArr',newArr.toJS()) // [{bar: 2}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Record } from 'immutable';

const Person = Record({
  name: '홍길동',
  age: 1
});

let person = Person();

// (1)
console.log(person.name) // 홍길동

// (2)
person = person.set('age', 5)
console.log(person.age) // 5
// person.name = '철수' (Error : Cannot set on an immutable record)

// (3)
person = Person({
  name: '영희',
  age: 10,
});
const { name, age } = person;
console.log(name, age) // 영희 10

// (4)
const dog = Record({
  name: '멍멍이',
  age: 1,
  foo: Record({
    bar: true
  })() // (*)
})() // (*)
console.log(dog.name) // 멍멍이
console.log(dog.foo.bar) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import produce from "immer";

const memo = [
  { idx: 1, title: "제목 1", isTrash: false },
  { idx: 2, title: "제목 2", isTrash: true }
];

// 읽기
console.log(memo[0].idx); // 1

// 추가
const addMemo = produce(memo, (draft) => {
  draft.push({
    idx: 3,
    title: "제목 3",
    isTrash: true
  });
});
console.log(addMemo[2]); // {idx: 3, title: "제목 3", isTrash: true}

// 수정
const updateMemo = produce(memo, (draft) => {
  draft[1].title = "제목 변경!";
});
console.log(updateMemo[1].title); // 제목 변경!

// 삭제
const deleteMemo = produce(memo, (draft) => {
  draft.pop();
});
console.log(deleteMemo); // [{idx: 1, title: "제목 1", isTrash: false}]