Redux & Typescript - typesafe-actions

Typesafe-actions 라이브러리로 코드를 조금 더 깔끔하게 만들고 리팩터링을 해보자. 먼저 typesafe-actions 모듈을 설치해주자.

참고로 createStandardAction은 typesafe-actions 최신 버전에서 deprecated로 분류되었다. 따라서 createStandardAction을 사용하고 싶다면 이전버전 (4.4.2) 으로 설치해주어야 한다.

createStandardAction을 불러오고, 기존의 액션 타입 뒤에 붙어있던 as const들을 지워준다.

지워준 후에는 이제 createStandardAction을 써주자. 각 디스패치 함수에 createStandardAction을 아래와 같이 넣어준다.

그리고 이렇게 작성해주자.

actions에 액션들을 넣어준다. 그 후, CounterAction이라는 타입을 만들어 ActionType (typesafe-actions 타입)에 타입을 <typeof actions>로 지정해준다. 그리고 리듀서도 createReducer로 더 쉽게 작성 가능하다.

리듀서가 이렇게 쉽게 작성되었다. 이제 리듀서는 완전히 똑같은 기능을 수행한다. 또한 이렇게도 작성 가능하다.

이번엔 조금 더 스위치문과 비슷한 형태가 되었다 (메서드체이닝). 이 경우 INCREASE와 같이 액션 타입 스트링을 넣어주는 것이 아닌 액션을 그대로 넣어도 작동한다. 그 경우 CounterAction type을 굳이 선언해줄 필요가 없어진다.

이렇게 되면 굳이 액션타입의 스트링들을 선언해줄 필요가 없어졌다 (재사용 할 일이 없기 때문에). 따라서 그냥 createStandardAction때 넣었던 변수들을 액션 타입 스트링 그대로 넣어줘도 되겠다.