RTK 쿼리용 Redux 도구 키트 설정 방법
6975 단어 apireduxreactjavascript
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
Reference
이 문제에 관하여(RTK 쿼리용 Redux 도구 키트 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/neildegrassetyson/how-to-setup-redux-tool-kit-for-rtk-query-2o69텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)