开发者问题收集

Redux RTK 查询:getDefaultMiddleware 不是一个函数

2021-09-08
6586

getDefaultMiddleware 来自哪里?我正在阅读 文档 ,它似乎神奇地出现在配置存储中。虽然这很棒,但它并没有进入我的商店,而且......因为这个函数没有导入路径,而且我不知道如何解决这个问题,所以我可以使用一些指导。

rtk 版本: “@reduxjs/toolkit”:“^1.6.1”,

tldr;

getDefaultMiddleware() 在我的商店中不存在 + 我还没有在文档中找到关于它的任何有用的东西。

这是我得到的错误:

在此处输入图片描述

这是我的 store.ts

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { myApi } from './services/api';

import authorReducer from './slices/authorSlice';
import transcriptReducer from './slices/transcriptSlice';

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    middleware: (getDefaultMiddleware) =>
      // "This expression is not callable."
      getDefaultMiddleware().concat(myApi.middleware),
    author: authorReducer,
    transcript: transcriptReducer,
  },
});

setupListeners(store.dispatch);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

这是我的 api.ts

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const apiEndpoint ='http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => {
        const { id, fileId } = arg;
        return `/some/endpoint/with/two/${id}/pathvariables/${fileId}`;
      },
    }),
  }),
});

// RTK Query will automatically generate hooks for each endpoint query
export const { useGetFileByIdQuery } = myApi;
3个回答

答案:

我的中间件 reducer: { ... } 内定义。我需要将其 移出 该 Reducer 对象。问题解决了。

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    author: authorReducer,
    transcript: transcriptReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(myApi.middleware),
});
kevin
2021-09-08

不要忘记像这样调用 getDefaultMiddleware getDefaultMiddleware() 然后说 .concat(myApi.middleware) 否则你会得到同样的错误。

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    author: authorReducer,
    transcript: transcriptReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(myApi.middleware),
});



   
Anand Oganiya
2022-07-04

我使用 Redux 持久化时是这样工作的:

const rootReducer = combineReducers({

  user:userSlice,
  fetchUsers:fetchUserSlice,
  [MyPostApi.reducerPath]:MyPostApi.reducer,
  
})

  const persistConfig = {

    key:'zomatostore',
    version:1,
    storage,
    
  }
  
  const persistedReducer = persistReducer(persistConfig, rootReducer)
  
export const store = configureStore({
  
  reducer:persistedReducer,
  middleware:getDefaultMiddleware => getDefaultMiddleware().concat(MyPostApi.middleware)

 
});
webdevShubhamKumar
2023-11-17