Mutation

변수를 변경하는 행위를 mutation이라고 한다.

const friends =["dal"]
friends.push("lynn")// => mutation

Never mutate the State!

이는 매우 중요한 리덕스의 기본 원칙 중 하나이다.
그럼 어떻게 변경해??
mutate하는 게 아니라 새로운 objects를 리턴해야 한다!
상태를 수정하는 것이 아니라 새로운 것을 만들어야함!

state를 mutate한 잘못된 방식

//state를 mutate한 잘못된 방식
const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return state.push(action.text);// NEVER DO THIS!!!!
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

새로운 object를 리턴하는 방식

//새로운 object를 리턴하는 방식
const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { text: action.text , id:Date.now()}];
    case DELETE_TODO:
      return [];
    default:
      return state;
  }
};

const store = createStore(reducer);
store.subscribe(() => console.log(store.getState()));

const onSubmit = (e) => {
  e.preventDefault();
  const toDo = input.value;
  input.value = "";
  store.dispatch({ type: ADD_TODO, text: toDo });
};

form.addEventListener("submit", onSubmit);