redux 불변성(immutable)

redux 의 state값을 변경할땐 불변성을 유지해주어야 한다.
왜냐 리덕스를 사용하는 이유 중 하나가 히스토리가 관리되기 때문!
변경하기 전 state값과 변경후의 state의 값을 비교하려면 불변성을 지켜줘야된다.

 

const obj1 ={}
const obj2 ={}

obj1 === obj2 //false

 

obj1 과 obj2 를 비교하면 false이다 
왜냐 둘다 새 객체이기 때문이다.

const obj1 = {a:2};
const obj2 = obj1.a

obj2 === obj1.a // true

 

obj2에 obj1의 a속성값을 넣어주고 
서로 비교하면 true가 된다. 
이럴경우엔 참조관계가 되기 때문이다.

 

(....)

const initialState = {
   name:'kim',
   job:'student',
   age:null;
}

const reducer = (state=initialState, action) =>{
 switch (action.type) {
    case TEST:
      return {
        ...state,
        age:action.data
      };
    default:
      return state
} 

 

그래서 redux에서 새로운 state값을 return할 경우 새 객체로 리턴을해준다
새객체로 리턴해주면 전의 state객체와 return해준 새 객체가 false가 되기때문에 전 state와 후 state값을 기록할 수 있기때문!

새객체가 return 되면 redux는 
age 의 값이 null 에서 우리가 action으로 넘긴 데이터 값으로 바뀐다는 걸 인지하고 state값을 추적해준다.

또한 객체 구조 분해 할당(...state)으로 모든 값을 넣어주되 바뀌는 부분만 변경해주어야 된다 
굳이 하나하나 코드를 똑같이 쓸 필요도 없을 뿐더러 메모리가 낭비되기 때문에 위의 방식으로 해주는것이 좋다.

(....)

const initialState = {
   name:'kim',
   job:'student',
   age:null;
}

const reducer = (state=initialState, action) =>{
 switch (action.type) {
    case TEST:
      return state.age = 20;
      break;
    default:
      return state
} 

 

만약 새로운 객체를 리턴하지 않는다면 state객체에서 age의 값은 2가 되고 참조관계가 되기때문에 redux는 둘다 true라고 생각하여 데이터의 값을 변경하지 않는다.

rudux에서 불변성은 리액트의 불변성과 비슷하기 때문에 리액트에서 리덕스를 사용한다면 꼭 알고 있어야 할거같다.