Redux에서 본래 state를 가져오는 것에 대한 중요성

Redux에 대한 공부를 이어가면서 계속 state가 변경되는 시점에서 변경 이후 바로 로 값이 바뀌는 아주 특이한 오류가 발생했다.

진짜 왜 그런건지 아주 애먹었지만! 결국 알아내서 여기 적어둔다.

store.js

export const modifier = (state = initialize, action) => {{
  switch (action.type){
    case "MOD": 
      return {
        name: action.name, artist: action.artist, imgurl: action.imgurl,         visible: action.visible
      }
    case "VISIBLE":
      return {
        visible: action.visible
      }
    default: 
      return state
  }
}}

위는 본래의 코드였다.
저기서 return값으로 본래의 state를 spread문법을 사용한 ...spread로 넣어주지 않은 채로 새로운 값만 선언을 하여 생긴 문제였다...

그래서 다음의 코드와 같이 수정하였다.

store.js

(...)
 return {
 		...state,
        name: action.name, artist: action.artist, imgurl: action.imgurl,         visible: action.visible
      }
    case "VISIBLE":
      return {
        ...state,
        visible: action.visible
      }
(...)

이와 같이 고쳐야 정확하게 return값으로 state가 수정됨을 확인할 수 있었다.

Redux를 이용해서 상태관리 할 때 본래의 state를 불러오는 것을 습관화하자!