[ZIMZIM] RTK Query + redux-toolkit + axios

ZIMZIM에서 RTK Query를 사용하는 이유

데이터를 반복적으로 받아오지 않고 한 번 받아오면 캐싱해두고 재사용하려는 목적으로 tanstack-query와 redux toolkit query 중 현재 상태관리 라이브러리로 redux toolkit을 사용하고 있기 때문에 자연스럽게 통합되는 redux toolkit query를 사용하게 되었다.

 

https://redux-toolkit.js.org/rtk-query/overview

RTK Query Overview | Redux Toolkit

 

 

RTK Query + redux-toolkit + axios 함께 사용하기

1. axios를 baseQuery로 사용할 수 있도록 axiosBaseQuery만들기

기존에 사용하던 axios instance를 사용하여 axiosBaseQuery로 만들어준다.

axiosBaseQuery 함수는 redux-toolkit과 redux toolkit query를 함께 사용하기 위해 커스텀 baseQuery함수를 정의한 것이다.

asxiosBaseQeury함수는 API 요청을 수행하기 위해 Axios를 사용하며 redux toolkit query를 BaseQueryFn 인터페이스를 처리한다. 다양한 API 요청을 하나의 방식으로 처리할 수 있게 된다.

 

2. axiosBaseQuery를 사용하는 baseApi 만들기

redux toolkit query를 기반으로 api 요청을 하나로 통일하고, 이 통신을 axios를 통해 처리하기 위해 만들었다.

 

createApi는 api 엔드포인트와 관련된 설정 및 요청 처리방식을 정의하며 redux store에서 데이터 패칭 및 캐싱을 쉽게 관리할 수 있다.

baseQuery에 axiosBaseQuery를 사용함으로서 모든 api요청이 axios를 통해 이루어지도록 한다.

tagTypes는 redux toolkit query에서 캐싱 및 데이터 갱신을 관리하기 위한 태그 유형들에 정의되며, 태그들을 사용해서 api 응답이 스토어에 저장될 때 해당 응답에 태그를 달아두고, 특정 조건에서 해당 태그에 연결된 캐시 데이터를 자동으로 갱신하거나 무효화할 수 있다.

3. store에 설정해주기

[baseApi.reducerPath]: baseApi.reducer는 baseApi에서 생성된 리듀서를 스토어에 추가한다. reducerPath는 redux toolkit query가 자동으로 생성하는 경로로, api 관련 상태가 이 경로에 저장된다.

baseApi.middleware는 redux toolkit query에서 api요청을 처리하고, 결과를 캐싱하며, redux 스토어와 연동하는데 사용된다.

 

4. baseApi를 사용하여 exerciseApi 만들기

injectEndPoints는 이미 정의된 baseApi에 새로운 엔드포인트를 주입하는 방식으로 코드의 재사용성을 높이는데 유용하다.

 

5. 컴포넌트에서 사용하기

사용하고 싶은 컴포넌트에서 호출해주면 된다.