본문 바로가기

React/Redux with Typescript

(2)
Redux & Typescript - typesafe-actions Typesafe-actions 라이브러리로 코드를 조금 더 깔끔하게 만들고 리팩터링을 해보자. 먼저 typesafe-actions 모듈을 설치해주자. createStandardAction을 불러오고, 기존의 액션 타입 뒤에 붙어있던 as const들을 지워준다. 지워준 후에는 이제 createStandardAction을 써주자. 각 디스패치 함수에 createStandardAction을 아래와 같이 넣어준다. 그리고 이렇게 작성해주자. actions에 액션들을 넣어준다. 그 후, CounterAction이라는 타입을 만들어 ActionType (typesafe-actions 타입)에 타입을 로 지정해준다. 그리고 리듀서도 createReducer로 더 쉽게 작성 가능하다. 리듀서가 이렇게 쉽게 작성되었다..
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패턴에 대해서 Ducks patternRedux를 사용하는 어플리케이션을 구축하다 보면 기능별로 여러 개의 ..