reducerPath“cryptoApi”处 RTK 查询 API 的中间件尚未添加到商店

Question

我对 redux 工具包的概念很陌生，我面临这个问题，我可以在控制台中看到数据，但我不断收到此错误，导致 Web 应用程序崩溃。 “reducerPath“cryptoApi”处 RTK 查询 API 的中间件尚未添加到商店中。 您必须添加 RTK-Query 的中间件才能正常运行！” 这是我的store.js

import { configureStore } from "@reduxjs/toolkit";

import { cryptoApi } from "../services/cryptoApi";

export default configureStore({
    reducer:{
        [cryptoApi.reducerPath]:cryptoApi.reducer,
    },
})

这是我的 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;

和我的index.js

ReactDom.render(
  <Router>
    <Provider store={store}>
      <App/>
    </Provider>
  </Router>
  
,document.getElementById('root'));

很难判断这背后的确切原因，因为我相信我的称呼是正确的。

Answer 1

你忘记在中间件中添加API

export default configureStore({
    reducer:{
        [cryptoApi.reducerPath]:cryptoApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(cryptoApi.middleware),

})

这里是链接https://redux-toolkit.js.org/rtk-query/api/created-api/redux-integration#middleware

Answer 2

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')
        })
    })
})

此处将

/

添加到网址：

https://coinranking1.p.rapidapi.com/

Answer 3

这正是我面临的问题，感谢您的回答