Redux & Typescript - Ducks Pattern Redux with Typescript

타입스크립트와 리덕스를 같이 써보자.

 

먼저 프로젝트를 생성하고, redux와 react-redux를 설치해주자. redux는 자체적으로 타입스크립트를 지원하지만, react-redux는 그렇지 않다. 그러므로 따로 추가해주어야 한다. 이렇게 설치해주자.

이제 react-redux도 타입스크립트가 지원이 된다. 정확히는 공식적인 지원이 아닌, 커뮤니티에서 만든 타입스크립트 써드파티 라이브러리이다.

 

이제 ducks pattern을 사용하여 모듈을 만들어주자. ducks pattern에 대해서는

http://guswnsxodlf.github.io/redux-ducks-pattern

Redux의 ducks패턴에 대해서

여기 자세히 나와있다.

 

이제 코드를 작성해 보자. 먼저 간단한 액션들을 만들었다.

그런데, 이런식으로 만든 후에, increase에 커서를 갖다대면,

output이 string을 포함한 객체로 뜬다. 그러나 우리가 원하는 것은 정확히 counter/INCREASE라는 스트링을 포함한 객체를 디스패치 하는 것을 알리는 것이다. 이것을 해결하려면 위의 타입선언 때 as const를 추가해주면 된다. 그러면,

이렇게 잘 알려준다. 참고로 위의 INCREASE 객체에는 뒤에 as const 가 붙어있다 (잘렸다).

 

이제 state와 action을 정의해주자. 먼저 CounterState을 정의해주고 initialState을 정의해준다. 그리고 CounterAction을 정의해준다.

 

여기서 ReturnType<typeof ###>를 통해 increase, decrease 또는 increaseBy가 리턴할 타입들을 넣어주었다. 이로써 어떠한 action들이 디스패치 될 수 있는지 정확하게 정의해주는 것이다.

리듀서를 완성해주고, 리듀서를 src/modules/index.ts의 루트리듀서에 편입시켜주자.

그 후. src/index.tsx의 스토어에 루트 리듀서를 추가해주고 Provider로 App을 씌워주면 끝이다.

이제 함수형 컴포넌트를 하나 만들어주고,

컴포넌트 컨테이너 만들어준 뒤, App에 넣어주면 된다.

실제 실행 모습: