Redux - immutable - Next tutorial(3)

immutable.js에 대해 설명을 하면...

 

List는 배열을 만드는 메소드이다. 이걸로 console로 찍어보면 실제로 Javascript에서 알고 있던 [1, 2, 3, 4]가 나오는것이 아니라 List 메소드에 대해서 나온다. 그래서 toJS()로 변환을 시켜줘야 한다. toJS()는 Javascript 자연적인 형태로 변환 시켜준다.

그래서 하단에 있는 사진을 보면 toJS()를 해준 것은 기존에 사용하던 배열을 볼 수 있다.

 

그래서 보통 React나 Redux에서 불변성을 지키기 위해서 push, shift 같은 메소드를 mutable한 메소드를 사용하지 말라고 하지만 immutable.js를 이용해서 사용이 가능하다.

 

immutable.js를 조금 더 쉽게 설명하면 객체를 새로운 객체로 만들어서 사용한다고 생각하면 쉬울것 같다. 그래서 불변성을 지키고 있다.

Code

 

Console

 

Map은 객체를 생성한다. set()이라는 메소드를 통해서 데이터를 넣을 수 있고, get()이라는 메소드를 통해서 데이터를 가져올 수 있다. 실제로 Map을 보게 되면 set을 통해서 저장한 값은 map 객체안 root - entries에 배열로 되어있고, 그 배열 [list, "hello"]로 저장이 되어 있다. get()를 사용하면 쉽게 값을 가져올 수 있다.

 

fromJS는 객체를 JS 객체를 Map과 List 형태로 불변성을 가지는 객체로 변환 시켜준다.

그래서 이전에 counter Redux를 살펴 보면 초기 상태 값을 fromJS로 Map 또는 List 형태로 불변의 객체로 지정하고 상태값을 set() 메소드를 활용해서 바꾸어 주었다.

그리고나서 store에서 값을 받아올 때, get() 메소드로 상태 값을 받아와서 사용을 했다.

 

counterReducer.js

 

CounterContainer.js