Redux query returning undefined

Question

I'm having this problem with redux where I run one api service and the response is received fine. However after I add another reducer path reducer:{ [cryptoApi.reducerPath]:cryptoApi.reducer, }, my response for all other services becomes undefined. Even if I return to only one reducer path from that point on all requests return undefined. photo of response found in the network section of the consul

photo of second response from the same api found in the consul

Does anyone know what's going on?

Api service setup

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
const cryptoHeaders = {
  'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com',
  'X-RapidAPI-Key': '9f2533afaemsh1f8a925387397f8p1fea4ejsn485665c91539'
};
const baseUrl =  "https://coinranking1.p.rapidapi.com";
const createRequest= (url) => ({
  url,
  headers:cryptoHeaders
})
export const cryptoApi = createApi({
  reducerPath: "crytopApi",
  baseQuery: fetchBaseQuery({baseUrl}),
  endpoints: (builder) => ({
    getCryptoData: builder.query({
      query: () => createRequest(`/coins`),
    }),
  }),
});

export const {useGetCryptoDataQuery} = cryptoApi

Where I'm calling it from

import { Routes, Route, Link } from "react-router-dom";

import { useGetCryptoDataQuery } from "./services/cryptoApi";
import { useGetnewsDataQuery } from "./services/newsApi";
import "./app.css";
const App = () => {
  const { cryptoData, cryptoError, isLoadingCrypto } = useGetCryptoDataQuery();
  console.log(cryptoData)
  return <div>{JSON.stringify(cryptoData)}</div>;
};

export default App;

store setup

import {configureStore} from '@reduxjs/toolkit'

import { cryptoApi } from '../services/cryptoApi'
export const store = configureStore({
    reducer:{
        [cryptoApi.reducerPath]:cryptoApi.reducer,
    },
})

I do call a provider and pass in the store

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter } from "react-router-dom";
import { store } from "./store/store.js";
import { Provider } from "react-redux";

import App from "./App.jsx";
import "./index.css";
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 1

The reason is because you're adding another reducer with the same function name. Your store is like this:

export const store = configureStore({
    reducer: {
       [cryptoApi.reducerPath]:cryptoApi.reducer,
       [cryptoApi.reducerPath]:cryptoApi.reducer
    }
})

Instead it should be like this:

export const store = configureStore({
    reducer: {
       [cryptoApi.reducerPath]:cryptoApi.reducer,
       [cryptoNewsApi.reducerPath]:cryptoNewsApi.reducer
    }
})