next.js Redux RTK查询:getDefaultMiddleware不是函数

cnjp1d6j  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(91)

getDefaultMiddleware是从哪里来的?我正在阅读docs,它似乎神奇地出现在configure store中。虽然这很棒,但它没有找到进入我的商店的方式,而且.
rtk版本:"@reduxjs/toolkit": "^1.6.1",

tldr;

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

以下是我得到的错误:

x1c 0d1x的数据

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

pzfprimi

pzfprimi1#

回答:

我把中间件定义在reducer: { ... }的内部。我需要把它移到reducer对象的外部。问题解决了。

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

字符串

u5rb5r59

u5rb5r592#

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

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

字符串

ecfdbz9o

ecfdbz9o3#

我的工作方式,因为我是使用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)
>     
>      
>     });

字符串

相关问题