Redux로 전역 State 관리를 했었을 때, Store에 저장해야 할 값을 Dispatch를 통해 Action으로 Reducer에게 전달하였다. 그런데 어찌된 일인지 Store에 값이 저장되지 않았다!

Redux를 처음 쓰다보니 내가 적용을 잘못한 것인지, Dispatch나 Action 혹은 Reducer을 잘못 사용할 것인지 알 수가 없어 한참 동안 코드를 해집으며 골머리를 썩혔다. 그런데 알고보니 원인은 단순했다.

Action에서 데이터를 payload로 전달했는데, Reducer에서는 paylaod로 받고있었다...

1. 아오..

storeAction.js

calculateProductPerPage()
	.then(() => {
        dispatch({ type: 'STORE_GET_PRODUCTLIST', payload: returnData});
    })
   
(...)

storeReducer.js

case 'STORE_GET_PRODUCTLIST':
	draft.processInfo.processData1 = action.paylaod;
	break;
    

내가 여러 프로젝트를 진행하던 초창기 시절에 가장 나를 힘들게 했던건 오타로 발생하는 문제들이었다. 오타로 인해 에러가 발생할 경우 JS 엔진 등이 에러가 발생한 지점과 원인을 콘솔 메시지로 출력해주기 때문에 어디가 문제인지 파악하는게 그대로 쉬운 편인데, 오타로 인해서 에러가 발생하지는 않지만, 기능도 동작하지 않는 경우가 사람을 미치게 한다.

이외에도 회원가입 이후 회원정보를 저장하는 기능이 동작하지 않는다던지, 로그인 이후 유저의 로그인 여부를 확인하는 기능이 동작하지 않는 등등.. 에러도 안나고 동작도 하는데 기능 일부 혹은 전체에 이상이 발생하여 머리를 쥐어뜯게 하는 문제 상당수는 오타가 원인이었다.

변수 이름을 processValue라고 정해놨는데, 다른 곳에서는 processvalue라고 써놨다..

변수 이름을 flagValue로 변경했는데, 다른 곳에서 이전에 쓰던 명칭을 변경해주지 않았다..

2. 잘 좀 하자..

이런 문제들은 내 스스로가 더 꼼꼼하게 살펴보지 않으면 해결할 수 없고, 몇 번이고 반복할 수 밖에 없는 문제들이다.

이따위 일을 몇 번 경험해본 다음부터는 문제가 생긴 기능의 코드를 계속 따라가보며 오타를 확인하는 습관이 생기기도 했고, 비동기 통신의 경우 then-catch 문을 사용해서 에러의 발생 지점과 원인을 특정하는데 도움을 받기도 한 덕분에 나중가서는 그렇게 큰 문제가 되지는 않았다. 그렇지만 코드를 작성할 때 더 꼼꼼하게 살펴봐야 한다. 제발!

• then-catch문은 위대하다!
  그런데 코드를 then-catch문 밖에 작성할 경우에는 아무 소용이 없다.. 이것도 어이없는 실수 중 하나이니 기억해둘 것!