Redux Toolkit과 React Redux를 사용하는 전형적인 Redux 프로젝트를 진행하는 것으로 가정한다.
Redux Toolkit(RTK)
RTK는 모던한 리덕스 패턴을 작성할 때 표준이되는 방식이다. 이미 타입스크립트로 작성된 RTK는 API와 더불어 타입스크립트 사용 환경에서 좋은 경험을 줄 것이다.
React Redux
리액트 리덕스는 NPM에서 @types/react-redux typedefs package
라는 고유의 타입 정의로 분리되어 있다. 그래서 타입 정의는 라이브러리와 함께 자동적으로 설치될 것이다. 만약 그렇지 않다면, 수동적으로 설치해야한다.
react-redux 타입 정의
ex. npm install @types/react-redux
or yarn add @types/react-redux
리덕스+타입스크립트 템플릿 옵션으로 CRA세팅을 한다면 위의 과정은 자동으로 세팅되므로 추천!!
redux+typescritp 템플릿 CRA세팅
npx create-react-app my-app --template redux-typescript
# or
yarn create react-app my-app --template redux-typescript
configureStore을 사용하면 어떤 추가적인 코드작성도 필요하지 않다. 그럼에도 우리는 필요에 따라 사용될 수 있게 RootState
와 Dispatch
의 타입을 추출할 상황이 있을 것이다. 이 두가지의 타입 추론은 store로 부터 온다. 우리가 state slice나 수정된 미들웨어 세팅을 추가하더라도 올바르게 업데이트 되는 것이다.
즉, 알맞은 타입을 동적으로 지정하기 위해 추가적인 세팅을 하는 것이다.
타입이기 때문에 store 파일로부터 곧바로 import하거나 export해도 안전하다.
생각해보기
// ReturnType<Type> 함수 Type의 반환 타입으로 구성된 타입을 생성
// typeof 뒤에 오는 값의 타입 검사 및 반환
// type of가 store.getState의 타입을 동적으로 받아옴
// <typeof store.getState> 자체가 타입을 반환하는 함수이기 때문에 ReturnType사용
export type RootState = ReturnType<typeof store.getState>;
// store.dispatch의 타입을 동적으로 받아옴
export type AppDispatch = typeof store.dispatch;
RootState
와 AppDispatch
타입은 이제 다른 컴포넌트에 사용될 수 있다. 하지만, 잦은 사용이 예상되는 useDispatch
와 useSelector
에 매 번 위의 타입을 지정하는 것은 그리 효율적이지 않다. 그렇기 때문에 미리 타입 정의를 해둔 버전을 만들어 놓는 것이 사용하기 편하고, 효율적일 것이다. 타입 설정의 더 자세한 이유는 다음과 같다.
useSelector
useDispatch
useAppDispatch
와 useAppSelector
는 타입이 아닌 변수로 설정되기때문에 store 설정 파일이 아닌, 별도의 hooks 파일에 분리해서 정의하는 것이 중요하다. 이 설정으로 원하는 컴포넌트 어디서든 이 hooks를 사용할 수 있다. 혹시 있을 수 있는 import 충돌 가능성을 피하는 방법이기도 하다.