无法读取未定义的属性（读取“合并”）-React RTK

Question

我是新尝试将所有切片存储起来，以便我的应用程序可以访问它，我在 stackoverflow 上看到了类似的问题，他们建议使用唯一的“reducerPath”名称。但是当我改变时，我收到了另一个错误调用者

Warning: Middleware for RTK-Query API at reducerPath "apifb" has not been added to the store.

还有一个疑问，在 store.js 中，如果有超过 3 个切片，请建议我一种更好的方法来将它们连接到中间件。我对反应很陌生，如果有人可以帮助我，我将非常感激。预先感谢

FacebookSlice

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import {api} from "../../config/constants";

export const facebookSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: api.FACEBOOK_GRAPH_URL,
    }),
    endpoints: (builder) => ({
        getPagePhotos: builder.query({
            query: () => ({
                url: api.FB_GET_PAGE_PHOTOS_URL,
                method: 'GET'
            }),
        })
    })
})
export const {
    useGetPagePhotosQuery
} = facebookSlice

serviceSlice.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import {api} from "../../config/constants";

export const serviceSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: api.API_BASE_URL,
    }),
    endpoints: (builder) => ({
        getServices: builder.query({
            query: () => ({
                url: '/',
                method: 'GET'
            }),
        })
    })
})

export const {
    useGetServicesQuery
} = serviceSlice

预订Slice.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import {api} from "../../config/constants";

export const bookingSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({
        baseUrl: api.API_BASE_URL,
    }),
    endpoints: (builder) => ({
        getBookings: builder.query({
            query: () => ({
                url: '/bookings',
                method: 'GET'
            }),
        }),
        createBooking: builder.mutation({
            query: (booking) => ({
                url: '/bookings/create',
                method: 'POST',
                headers:{},
                body: booking
            }),
        })
    })
})

export const {
    useGetBookingsQuery,
    useCreateBookingMutation
} = bookingSlice

store.js

import { configureStore } from '@reduxjs/toolkit';
import { facebookSlice } from './features/api/facebookSlice'; 
import { bookingSlice } from './features/api/bookingSlice'; 
import { serviceSlice } from './features/api/serviceSlice';

const store = configureStore({
    reducer: {
        [facebookSlice.reducerPath]: facebookSlice.reducer,
        [bookingSlice.reducerPath]: bookingSlice.reducer,
        [serviceSlice.reducerPath]: serviceSlice.reducer
    },
    middleware: (getDefaultMiddleware) =>                 
    getDefaultMiddleware().concat([bookingSlice.middleware, serviceSlice.middleware])
});

export default store;

index.js

import React, { Children } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'semantic-ui-css/semantic.min.css'
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import Layout from './layout';
import Home from './components/home/home'
import Booking from './components/booking/booking'
import { ApiProvider } from '@reduxjs/toolkit/dist/query/react';

import { serviceSlice } from './features/api/serviceSlice';
import { Hallway } from './components/hallway/hallway';
import { Provider } from 'react-redux';
import  store  from './store';


const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: "",
                element: <Home />
            },
            {
                path: "booking",
                element: <Booking />
            },
            {
                path: "hallway",
                element: <Hallway />
            }
        ]
    }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <Provider store={store}>
            <RouterProvider router={router} />
        </Provider>
    </React.StrictMode>
);
reportWebVitals();

Answer 1

问题

您有两个 API 切片，都使用默认的

reducerPath

值，例如

"api"

这会产生冲突。

参见

reducerPath

。

reducerPath

是一个唯一键，您的服务将被安装 到您的商店。如果您多次拨打

createApi

应用程序中，您每次都需要提供一个唯一的值。 默认为

'api'

。

const store = configureStore({
  reducer: {
    [facebookSlice.reducerPath]: facebookSlice.reducer, // api: facebookSlice.reducer
    [bookingSlice.reducerPath]: bookingSlice.reducer,   // api: bookingSlice.reducer
    [serviceSlice.reducerPath]: serviceSlice.reducer    // api: serviceSlice.reducer
  },
  middleware: (getDefaultMiddleware) =>                 
    getDefaultMiddleware()
      .concat([
        bookingSlice.middleware,
        serviceSlice.middleware
      ])
});

解决方案

为每个 API 切片提供唯一的减速器路径值。

export const facebookSlice = createApi({
  reducerPath: 'facebookApi', // <-- unique among API slices
  baseQuery: fetchBaseQuery({
    baseUrl: api.FACEBOOK_GRAPH_URL,
  }),
  endpoints: (builder) => ({
    getPagePhotos: builder.query({
      query: () => ({
        url: api.FB_GET_PAGE_PHOTOS_URL,
        method: 'GET'
      }),
    })
  })
});

export const serviceSlice = createApi({
  reducerPath: 'serviceApi', // <-- unique among API slices
  baseQuery: fetchBaseQuery({
    baseUrl: api.API_BASE_URL,
  }),
  endpoints: (builder) => ({
    getServices: builder.query({
      query: () => ({
        url: '/',
        method: 'GET'
      }),
    })
  })
});

export const bookingSlice = createApi({
  reducerPath: 'bookingApi', // <-- unique among API slices
  baseQuery: fetchBaseQuery({
    baseUrl: api.API_BASE_URL,
  }),
  endpoints: (builder) => ({
    getBookings: builder.query({
      query: () => ({
        url: '/bookings',
        method: 'GET'
      }),
    }),
    createBooking: builder.mutation({
      query: (booking) => ({
        url: '/bookings/create',
        method: 'POST',
        headers: {},
        body: booking
      }),
    })
  })
});