Redux state 에 올바른 데이터 추가방법!

 

redux는 지켜야 할 규칙이 있는데. 그중에 이번엔 데이터를 추가하는 올바른 방법에  대하여 알아보겠다.

 

mutate state => No!  

 

input 에 텍스트를 입력하게 되면 form에 submit을 통해 onSubmit 함수가 실행된다.

input.value를 통해 값을 새 변수에 담은 후 store.dispatch로 action type ADD_TODO 를 보낼 때 payload ( 값을 전달)

를 하게 되는 코드이다.

 

여기서 reducer 에서 값을 modify(수정) 하기 위해  action.type === ADD_TODO 이곳에 명령을 실행시켜 return 하는데,

자주 듣는 말이 값을 수정할 때는 mutable  하면 안 된다!라는 말을 자주 듣게 된다 

이 말의 뜻은  데이터의 원본을 직접적으로 변경하면 안 된다는 뜻이다. redux 불변성(immutable)

 

const reducer = (state = [], action) => {

  switch (action.type) {

    case ADD_TODO:

      return state.push(action.text)   <-- 이렇게 하면 안됩니다. mutable

    case DELETE_TODO:

      return [];

    default:

      return state;

  }

};

 

 

return [...state, {text:action.text}];   <--이렇게 해야합니다. immutable

immutable(불변성)을 지키기 위해 ES6 spread 문법으로  값을 copy 한 후 추가할 값과 함께

새로운 객체로 return 해주는 방식을 사용해야 한다.!

 

입력을 두 번 하고 콘솔에 찍어보면 

 

 

 

 

이렇게 입력한 순서대로 데이터에 추가가 된 것은 확인할 수 있습니다~

 

*잘못된 부분이 있으면 댓글 부탁드립니다  ^^ ;;*