[TypeScript] Redux의 action.type에 enum을 사용하여 생긴 문제(as const 사용)

문제 상황

• redux의 action.type 들을 enum으로 만듬
  • action.type 은 string이고 이를 enum으로 관리하는 게 좋아 보였기 때문
• action.type 에 따라 action.payload 가 바뀌어야 함
• reducer에서 payload 타입을 제대로 읽어내지 못함
• 에러
  

시도 방법

• 리듀서에서 받고 있는 action.payload 의 타입이 어떻게 됐는 지 확인
  

  • 어라? 어째서 action creator에서 반환된 값이 지정되지 않지?
    → case의action.type 은 TODO_ACTIONS 중에 하나를 사용하는 것이기 때문에 고정되는 것이 아님 → 그래서 payload 타입도 고정이 되지 않는 것임

    💡 아 그럼 ReturnType을 고정시키면 되겠구나

해결 방안

action.payload 타입을 action.type 에 매칭시켜서 고정하자!

• action creator의 반환값에 as const 사용
  • 이 함수가 반환하는 거는 이런 모양이야🔨 라고 못박기
    
  • creator 함수 모두의 반환값에 as const를 해주지 않으면 여전히 리듀서에서 헷갈려하기 때문에 모두 바꾼 후에 타입을 확인해야 함
• 결과
  
  
  • 각 action.type별로 payload 타입이 고정되었음을 확인했다(나머지 케이스는 너무 길어서 스샷 생략)

---

🤔 궁금해진 점

• 왜 action creator의 반환 값을 정해줬는데도 고정이 안된걸까?
  

  

  • action.type 을 구별해내는 enum이 TODO_ACTIONS 에 할당된 것들중 하나(string)이기 때문에 리듀서의 switch문에서 action.type의 case별로 정확히 구별해낼 수 없음 -> 따라서 TodoAction에 할당된 payload 값들 중에 하나가 될 것이라고 두루뭉술하게 알고 있음
  • 각 action creator별로 정확하게 이런 모양의 값이 반환될거야(= as const)라고 지정해줘서 리듀서에서 정확하게 체크할 수 있게 됨

• 왜 이게 궁금했지? → as const 를 한번에 이해하지 못해서 생긴 궁금점인거 같다

  • 공부해보려고 참고한 블로그