리덕스 툴킷(Redux Toolkit) 설정 기본 가이드: 설치부터 사용까지 단계별 정리

 

리덕스 툴킷 세팅 후, 다음 세팅시 참고하기 위해 순서를 정리 해 보았다.

 

1.  먼저, 터미널에서

yarn add @reduxjs/toolkit react-redux

을 해주어 리덕스 툴킷을 설치 해 준다.

 

2.  root 경로에 store 폴더를 생성,

 

store/index.ts

위 와 같이 configureStore 함수를 만들어 준다.

초기상태에서 reducer는 빈오브젝트 상태로 남겨주면 된다.

 

3. store를 Provider를 통해 앱에 공급 해 준다.

 

pages/api/_app.tsx

 

4. Store폴더 안에서 CounterSlice 함수를 생성 해 준다.

 

store/features/counter/index.ts

5. 이후, 2번에서와 같이 아까 만들어 둔 store/index.ts에 reducer를 추가 해 주면, 리덕스 툴 킷 세팅이 끝난다.

 

6. useAppDisatch와 useAppSelector를 사용하여 정상 작동하는 지 확인 해 볼 수 있다.

 

pages/api/index.tsx

 

비고

Redux Toolkit 공식홈페이지의 Quick Start를 보며 따라 설치 하였고,
공식 홈페이지의 내용만으로 이해하기 어려운 부분은 생활코딩님의 유튜브 강의를 보며 이해하였다.

 

---

참조:

https://redux-toolkit.js.org/tutorials/quick-start

https://www.youtube.com/watch?v=9wrHxqI6zuM