소개

Flatiron School과 함께하는 웹 개발 과정의 마지막 프로젝트의 일환으로 Redux Toolkit 구현을 시도하기로 결정했습니다. 나는 지금까지 특정 구성 요소 내에서 React의 로컬 상태만 조작했지만 강사는 학생들이 안전 영역에서 벗어나 최종 프로젝트에서 새로운 개념을 시도하도록 격려했습니다.

전체 과정에서 React로 작업할 때 가져오기 요청을 내 백엔드로 보내고, 응답을 JSON으로 변환한 다음, useState 후크를 사용하여 해당 데이터를 로컬 상태 변수에 할당하는 것이 끔찍하게 반복된다는 것을 알았습니다. Redux 및 관련 Redux Toolkit을 조사하기 시작하면서 RTK Query라는 강력한 도구를 발견했습니다. 이를 통해 개발자는 API에서 쉽게 데이터를 가져오고 캐시할 수 있습니다.

메모:

이 데모에서는 npx create-react-app restaurant-app --template redux 또는 npx create-react-app restaurant-app로 React 애플리케이션을 만들고 나중에 npm install @reduxjs/toolkit로 Redux Toolkit을 설치했다고 가정합니다.

1 단계:

RTK 쿼리는 핵심 Redux Toolkit 패키지에 포함되어 있습니다. import { createApi } from '@reduxjs/toolkit/query/react' 를 사용하여 애플리케이션 내의 구성 요소에 사용할 수 있습니다.

2 단계:

서버에서 검색한 기본 URL과 해당 기본 URL에서 활용하려는 엔드포인트를 포함하는 Redux 슬라이스와 매우 유사한 "API 슬라이스"를 정의합니다.

//./src/slices/restaurantSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'


  //auto-generates an "API slice" when using createApi()
    //in this case, useGetAllRestaurantsQuery
export const restaurantApi = createApi({
    reducerPath: 'restaurantApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000/'}),
    endpoints: (builder) => ({
        getAllRestaurants: builder.query({
            query: () => `/restaurants`,
        })
    }),
})

export const {useGetAllRestaurantsQuery} = restaurantApi

이제 useGetAllRestaurantsQuery가 내보내지고 http://localhost:3000/restaurants 끝점에서 검색하도록 설정됩니다. 그러나 여전히 Redux 스토어를 설정해야 합니다.

3단계:

Redux 스토어를 설정하려면 "./src/store.js" 파일로 이동하고 다음 코드를 추가합니다.

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { restaurantApi } from "./slices/restaurantSlice";

const store = configureStore({
    reducer: {
        [restaurantApi.reducerPath] : restaurantApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(restaurantApi.middleware),

})


export default store;

4단계:

이제 2단계에서 생성된 React 후크useGetAllRestaurantsQuery를 가져와 필요한 모든 구성 요소에서 사용할 수 있습니다.

import React from "react";
import { useGetAllRestaurantsQuery } from ".src/slices/restaurantSlice.js";

function Restaurants(){

    const { data, error, isLoading, isSuccess } = useGetAllRestaurantsQuery();

return(
    <div>{data.information}</div>
  )
}

export default Restaurants;

data , error , isLoading 및 isSuccess 상태 변수는 RTK 쿼리에서 제공되며 다양한 상황에 대한 응답의 사용자 지정 처리에 사용할 수 있습니다.

다른 일반적인 사용법:

끝점을 원하는 만큼 추가할 수 있습니다. 여기에서는 하나만 보여 드렸습니다. API 구성 방식에 따라 슬라이스 함수 및 URL 엔드포인트에 매개변수를 추가하여 엔드포인트에서 특정 항목을 검색할 수도 있습니다.

getRestaurantByName: builder.query<Restaurant, string>({
      query: (name) => `restaurant/${name}`

결론:

이제 하나의 후크를 사용하여 데이터를 가져오고 캐시합니다! 내 프로젝트 개발에 RTK 쿼리가 유용하다는 것을 알게 되었고 여러분도 사용할 기회가 있기를 바랍니다.