RTK Query

- RTK Query란?

  Redux Toolkit core 위에서 작성된 Data Fetching, Caching Tool

  기존 Redux에 비해 훨씬 적은 양의 코드로 처리하여 상태 관리를 할 수 있다.

  그 이유는 API 요청부터 데이터를 받아서 바로 Store에 저장하는 단계를 쭉 이어서 처리하기 때문이다.

 

 

- 언제 사용하면 좋을까?

  Redux의 fetching 로직을 단순화 시킬 때나 코드 간결화, Redux DevTools를 이용해서 상태의 히스토리 변화를 보고 싶을 때 사용하면 좋을 것 같다. 그리고 isLoading 같은 변수를 이용하여 Data를 받아오기 전에 특정 UI를 보여줌으로써 UX를 향상시킬 수 있다. 

 

 

- 예제

 

 - API 생성

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// createApi를 통해 API 서비스 생성
// baseUrl과 endpoints로 서비스를 정의
export const contentApi = createApi({
  reducerPath: "contentApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "/api",
    // Header 보내는 방법
    prepareHeaders: (headers) => {
      headers.set("TEST-AUTH", "wantedpreonboarding");
      return headers;
    },
  }),
  //endpoints에서 Request하여 받은 데이터를 가지고 Hooks를 만든다.
  endpoints: (builder) => ({
    // 요청할 url을 query에 담아서 property에 넣는다.
    getContents: builder.query({ query: () => "/info/contents" }),
  }),
});

// 반드시 use[property 명]Query로 Hooks을 만든다. 이름이 다르면 오류 발생
export const { useGetContentsQuery } = contentApi;

 

 - Store 생성

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { contentApi } from "./query/contentApi";

export const store = configureStore({
  reducer: {
  //특정 top-level slice에서 생성된 리듀서를 추가한다.
    [contentApi.reducerPath]: contentApi.reducer,
  },
  // Tool과 캐싱, 요청 취소, 폴링 등 유용한 기능들을 위한 middleware 설정
  devTools: true,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(contentApi.middleware),
});

// refetchOnFocus 및 refetchOnReconnect 동작을 활성화하는 데 사용되는 유틸리티
setupListeners(store.dispatch);

 

 - index.js Provider로 감싸기

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./store/store";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root"),
);

 

 - 원하는 컴포넌트에서 쿼리 사용하기

// hooks import
import { useGetContentsQuery } from "../../store/query/contentApi";

// data : request하고 받은 data
// error : error 발생 시 true, 아닐 시 false
// isLoading : data를 받기 전이면 true, data를 받기가 완료 되었다면 false
const { data, error, isLoading } = useGetContentsQuery();