초보자를 위한 리덕스 101 : Mutation 금지!

Mutation(변형)은 무엇인가? 말 그대로 변형을 의미한다.

이 부분은 필자의 절대적인 생각이며, 확신이 아닌 참고용이다.

필자가 생각하는 Mutation은 push, pop, join 이런 것들이지 않을까 하는 조심스러운 발언을 해본다.

(그저 필자가 javascript를 해보면서 대략적으로 이러지 않을까 하는 생각이다.

 

mutation을 권장하지 않는 다면 과연 리덕스에서는 무엇을 써야 하는가? 

바로 새로운 state(상태)를 return을 하는 것이다. 즉, object를 return 하는 의미라고도 한다.

(사실 적으면서도 내가 이해한 부분이 맞는지 의심이 간다...)

상태를 수정하는 것이 아닌, 새로운 것을 return을 해야한다는 의미다.

(왜 이게 중요한 것일까? 사실 어떤 의미로 한건 알지만 왜? 라는 생각은 계속 든다...)

 

// src > index.js

// 중략

const reducer = (state = [], action) => {
  console.log(action);
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.text }];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

// 중략

return 에서의 대괄호[...]는 object를 의미한다. 그리고... state는 과거의 state의 object를 가져오게 된다. 그리고 다음 중괄호 { text: action.text }는 과거의 object안의 JSON값으로 추가하는데 전체 object를 return을 하게 되는 것이다.

즉, [] = array, 배열, {} = object, 객체으로 기억을 해두면 좋을 듯 하다. ( 사실 아직도 헷갈린다...)

 

// src > index.js

// 중략

const reducer = (state = [], action) => {
  console.log(action);
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.text }];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

const store = createStore(reducer);

store.subscribe(() => console.log(store.getState()));

// 중략

여기서 subscribe를 추가하였을 경우 다음과 같은 현상이 발생한다.

subscribe console.log.jpg