RTK 쿼리용 Redux 도구 키트 설정 방법

Redux 툴킷 쿼리 또는 줄여서 RTK 쿼리는 바퀴 이후 인간의 가장 위대한 발명품입니다. API에서 데이터 가져오기와 같은 비동기 작업 수행을 단순화합니다. 이 기사에서는 RTK 쿼리를 사용하도록 프로젝트를 설정하는 방법을 보여줍니다.

create-react-app 실행npx create-react-app .

다음 종속성을 설치합니다.

npm install react-redux @reduxjs/toolkit 

주목
단일 기능에 대한 모든 파일은 동일한 폴더에 있어야 합니다. 즉, 게시물과 관련된 모든 항목은 posts라는 폴더에 있어야 합니다.

가게를 차리다

// src/app/store.js

import { configureStore } from "@reduxjs/toolkit"
import { apiSlice } from "./api/apiSlice";


export const store = configureStore({
  reducer: {
   // reducer for slice goes here
  },
})

export default store

스토어를 앱에 제공

전체 앱을 스토어로 래핑합니다.

// index.js
import App from './App';
import { store } from './app/store'
import { Provider } from 'react-redux'

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

API 슬라이스 생성

// src/app/api/apiSlice.js

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

const baseQuery = fetchBaseQuery({
    baseUrl: "https://ifeanyi-stock-backend.herokuapp.com/"
})

export const apiSlice = createApi({
    baseQuery: baseQuery,
    endpoints: builder => ({})
})

스토어에 API Slice 리듀서를 추가합니다.

apiSlice.reducerPath는 API 슬라이스 축소기에 이름을 동적으로 할당하는 데 도움이 됩니다.

import { configureStore } from "@reduxjs/toolkit"
import { apiSlice } from "./api/apiSlice";


export const store = configureStore({
    reducer: {
        [apiSlice.reducerPath]: apiSlice.reducer
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(apiSlice.middleware),
    devTools: true
})

감사합니다, 팔로우해주세요

github