frontend

[RTK-Query] Warning: Middleware for RTK-Query API at reducerPath "api명" has not been added to the store.

jhlee_ 2022. 8. 8. 18:57

에러상황

클릭하여 크게보기

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