I am new to this concept of redux toolkit and I am facing this issue where I can see the data in console but I am contantly getting this error due to which the web app is crashing . "Middleware for RTK-Query API at reducerPath "cryptoApi" has not been added to the store. You must add the middleware for RTK-Query to function correctly!" This is my store.js
import { configureStore } from "@reduxjs/toolkit";
import { cryptoApi } from "../services/cryptoApi";
export default configureStore({
reducer:{
[cryptoApi.reducerPath]:cryptoApi.reducer,
},
})
This is my cryptoApi.js
import { BehanceSquareOutlined } from '@ant-design/icons';
import {createApi ,fetchBaseQuery} from '@reduxjs/toolkit/query/react';
const cryptoApiHeaders={
'X-RapidAPI-Key': 'blabla',
'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
}
const baseUrl = 'https://coinranking1.p.rapidapi.com';
const createRequest = (url) => ({ url, headers: cryptoApiHeaders });
export const cryptoApi =createApi({
reducerPath:'cryptoApi',
baseQuery:fetchBaseQuery({baseUrl}),
endpoints:(builder) =>({
getCryptos:builder.query({
query:()=> createRequest('/coins')
})
})
})
export const {
useGetCryptosQuery
} = cryptoApi;
and my index.js
ReactDom.render(
<Router>
<Provider store={store}>
<App/>
</Provider>
</Router>
,document.getElementById('root'));
It is difficult to guage exact reason behind this because I believe I am calling things properly .
you forget to add the API in the middleware
export default configureStore({
reducer:{
[cryptoApi.reducerPath]:cryptoApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(cryptoApi.middleware),
})
here is link https://redux-toolkit.js.org/rtk-query/api/created-api/redux-integration#middleware