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'
  }
  const baseUrl = '';

  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 .

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.'
  }
  const baseUrl = 'https://coinranking1.p.rapidapi.';

  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 .

• javascript
• reactjs
• redux
• redux-toolkit

2 Answers 2

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/rtk-query/api/created-api/redux-integration#middleware

const baseUrl = 'https://coinranking1.p.rapidapi.';

const createRequest = (url) => ({ url, headers: cryptoApiHeaders });
export const cryptoApi = createApi({
    reducerPath:'cryptoApi',
    baseQuery:fetchBaseQuery({baseUrl}),
    endpoints:(builder) =>({
        getCryptos:builder.query({
            query:()=> createRequest('/coins')
        })
    })
})

Here add / to the url: https://coinranking1.p.rapidapi./