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

    좋은 웹페이지 즐겨찾기