<aside> 💡 데이터 fetching과 caching 로직을 줄이기 위해서!
</aside>
데이터를 가져오는데는 해줘야 할 일이 많습니다.
기존엔 상태 관리와 엮어서 해결하려던 부분을 별도의 작업이라고 생각하기 시작했습니다.
RTK Query는 createSlice랑 createAsyncThunk로 만들어진 리덕스 라이브러리입니다. 그리고 Query를 통해서 데이터 로딩 등 컴포넌트를 만들고 화면을 구성하는데 필요한 값들을 제공해줍니다.
RTK Query의 경우 RTK와 같이 사용하게 된다면, 하나의 store로 환경이 구성됩니다. 기본적인 RTK 설정에 middleware를 통해 API query들을 추가해주면 됩니다.
기본적으로 공식문서에서 권장하는 구조는 아래와 같습니다.
graph TB
A[api.ts] --> B[middleware]
A --> C[reducer]
A --> D[reducerPath]
B --> E[store.ts]
C --> E
D --> E
E --> F[Provider.tsx]
Provider에 Store configure를 넣어주고, configure는 각 api.ts파일들에서 가져온 값들이 들어 있습니다.