에러상황

app.bundle.js:9748
Warning: Middleware for RTK-Query API at reducerPath "authApi" has not been added to the store.
Features like automatic cache collection, automatic refetching etc. will not be available.
위와 같은 에러가 떴다. 에러 메시지를 잘 읽어보면
reducerPath에 "authAPI"에 RTK-Query API를 위한 미들웨어가 store에 추가되지 않았습니다.
자동 캐쉬 수집, 자동 리패칭 등과 같은 기능은 사용할 수 없을 것입니다.
라고 적힘. 공식 문서 Configure the store을 살펴보자.
Configure the Store
The "API slice" also contains an auto-generated Redux slice reducer and a custom middleware that manages subscription lifetimes. Both of those need to be added to the Redux store:
"API slice"는 또한 자동생성 되는 Redux slice reducer와 subscript 생명을 관리하는 커스텀 미들웨어를 포함하고 있습니다.
이것 모두 Redux store에 추가될 필요가 있습니다.
import { configureStore } from '@reduxjs/toolkit'
// Or from '@reduxjs/toolkit/query/react'
import { setupListeners } from '@reduxjs/toolkit/query'
import { pokemonApi } from './services/pokemon'
export const store = configureStore({
reducer: {
// Add the generated reducer as a specific top-level slice
[pokemonApi.reducerPath]: pokemonApi.reducer, // ☑️ 추가
},
// Adding the api middleware enables caching, invalidation, polling,
// and other useful features of `rtk-query`.
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(pokemonApi.middleware), // ☑️ 추가
})
// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
setupListeners(store.dispatch)
해결방법
store에 reducer와 middleware, 이 두 곳(☑️)에 추가되었는지
살펴보고 보았더니 빠진 부분이 있었고 작성하여 문제를 해결하였다.
728x90
'frontend' 카테고리의 다른 글
[tsconfig] Cannot write file '파일경로/파일명.js' because it would overwrite input file.ts (0) | 2022.09.27 |
---|---|
[TypeScript] JSON파일 import하기 (0) | 2022.09.16 |
Warning: React version not specified in eslint-plugin-react settings. (0) | 2022.09.10 |
[npm] Failed to install dependencies - npm 7 버전 (0) | 2022.08.08 |
[ESlint] Unexpected console statement. eslint(no-console) (0) | 2022.08.07 |