redux(reducer)의 불변성

1. redux(reducer)에서 불변성을 유지하는 이유

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

2. 객체의 불변성이란?

const obj1 ={}
const obj2 ={}
obj1 === obj2 

=> 둘 다 새 객체이기 때문에 false

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

=> 이 둘은 참조관계이기 때문에 true

3. 새 객체로 리턴하기!

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 값을 리턴 할 경우, 새 객체로 리턴 해줌
  새 객체로 리턴해 주면 전의 state 객체와 리턴 해준 새 객체가 false가 되기 때문에, 전 state와 후 state 값을 기록할 수 있기 때문
• 객체 구조 분해 할당을 사용

=> 과거의 히스토리와 현재의 히스토리의 비교를 위함
=> 새 객체로 리턴을 해 주어야 state 값이 추적됨

4. 새 객체로 리턴해 주지 않으면?

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의 값은 20이 되고 참조관계가 되기 때문에 redux는 둘다 true라고 생각하여 데이터의 값을 변경하지 않음