0731-TIL-Redux Toolkit + TypeScript

TypeScript로 기본 세팅하기

• yarn add redux react-redux @reduxjs/toolkit
• configureStore.ts 파일 생성
• todoSlice.ts 파일 생성

configureStore.ts

• state의 타입 지정 (10번째 줄)
  • RootState로 이름을 지어서 그냥 state와 헷갈리지 않도록 했다.
• dispatch의 타입 지정 (11번째 줄)
  • 다른 블로그를 참고했을 때 지정하는 과정이 있어서 똑같이 작성했는데, 굳이 타입을 지정해주지 않아도 오류가 나지 않아서 주석처리 했다.
  • 주석처리를 풀어도 오류가 없다.
  • dispatch의 타입에 대해서는 더 공부해봐야 할 거 같다!🔥

todoSlice.ts

• initailState의 타입을 interface로 미리 지정하고 타입을 지정한다.
  • stateType의 Todo[] 타입은 다른 컴포넌트에서 만든 타입을 import해서 사용했다.

 

• action의 타입 지정
  • PayloadAction이라는 api를 리덕스 툴킷에서 import해서 사용했다.
  • 각각 dispatch로 전달 받는 payload의 타입에 맞춰서 작성하면 된다.

 

컴포넌트에서 redux사용

• useSelector 사용시에 가져오는 state의 타입을 지정해주어야 한다.
• configStore.ts 에서 만들어서 export한 RootState로 타입을 지정하면 된다!

 

 

참고한 블로그

https://kimyang-sun.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%88%B4%ED%82%B7%EC%9C%BC%EB%A1%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-React-Redux-Toolkit

리액트 리덕스 툴킷으로 상태관리하기 (React + Redux Toolkit + TypeScript) - with Next.js

https://dygreen.tistory.com/entry/React-Redux-Toolkit-%EC%82%AC%EC%9A%A9%EB%B2%95-TypeScript-%EC%84%B8%ED%8C%85

[React] Redux Toolkit 사용법 (+ TypeScript 세팅)