https://velog.io/@velopert/use-typescript-and-redux-like-a-pro

이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다.

그런데 프로처럼 사용해보기 전에, 당연히 기초부터 알아보아야겠지요? 먼저 기본적인 리덕스 코드 작성 방법을 알아보고, 나중에 프로처럼 사용해보는것도 배워보겠습니다.

이 튜토리얼에서는 정말 간단한 리덕스 예시인 카운터와 투두리스트를 만들어보게 됩니다.

이 튜토리얼에 사용되는 모든 코드는 CodeSandbox 에서 확인 할 수 있습니다.

프로젝트 만들고, 라이브러리 설치하기

리덕스를 적용한 리액트 프로젝트를 만들어봅시다.

$ npx create-react-app ts-react-redux-tutorial --typescript
$ cd ts-react-redux-tutorial
$ yarn add redux react-redux @types/react-redux

redux의 경우엔 자체적으로 TypeScript 지원이 됩니다. 하지만 react-redux의 경우 그렇지 않기 때문에 패키지명 앞에 @types를 붙인 패키지를 설치해주어야 합니다.

@types는 TypeScript 미지원 라이브러리에 TypeScript 지원을 받을 수 있게 해주는 써드파티 라이브러리입니다. 이에 관련된 소스코드는 DefinitelyTyped 라는 GitHub 레포에서 관리가 되고 있습니다.

라이브러리에서 공식 TypeScript지원이 되는지 안되는지 확인을 하시려면 직접 설치 후 불러와서 확인을 해보셔도 되고, GitHub레포를 열어서 index.d.ts 라는 파일이 존재하는지 확인하시면 됩니다.

카운터 리덕스 모듈 작성하기

가장 간단한 예시인 카운터를 구현하기 위한 리덕스 모듈을 작성해보겠습니다. 우리는 리덕스 관련 코드를 작성 할 때 Ducks 패턴을 사용할 것입니다. Ducks 패턴에서는 편의성을 위하여 액션의 type, 액션 생성함수, 리듀서를 모두 한 파일에 작성합니다.

src 디렉터리 안에 modules 디렉터리를 만들고 그 안에 counter.ts 파일을 만들어서 다음 코드들을 순서대로 입력해보세요.

1. 액션 type 선언

액션 type들을 선언해보겠습니다. 여기서의 "type"은 TypeScript의 type을 의미하는게 아니라 리덕스 액션 안에 들어가게 될 type값 입니다.

type을 선언 할 때에는 다음과 같이 문자열 뒤에 as const 라는 키워드를 붙여주셔야합니다.

const INCREASE = 'counter/INCREASE' as const;
const DECREASE = 'counter/DECREASE' as const;
const INCREASE_BY = 'counter/INCREASE_BY' as const;