Question

无法读取未定义的属性“providesTags”

2021-08-24

5887

javascript redux redux-toolkit rtk-query

我正在使用 RTK 查询通过“useGetUserQuery”通过 api 获取一条记录

Api 调用正常，因为后端有结果。我使用 sequelize，结果发送数据对象。我尝试删除提供标签，但遇到了同样的问题。

我的前端返回此错误：

rtk-query.esm.js:771 Uncaught (in promise) TypeError: Cannot read property 'providesTags' of undefined
at calculateProvidedByThunk (rtk-query.esm.js:771)
at rtk-query.esm.js:908
at redux-toolkit.esm.js:603
at produce (immer.esm.js:1)
at redux-toolkit.esm.js:602
at Array.reduce (<anonymous>)
at redux-toolkit.esm.js:581
at combination (redux.js:528)
at reducer (rtk-query.esm.js:992)
at combination (redux.js:528)
at computeNextEntry (<anonymous>:3395:21)
at recomputeStates (<anonymous>:3429:17)
at <anonymous>:3809:22
at Object.dispatch (redux.js:288)
at dispatch (<anonymous>:3856:17)
at rtk-query.esm.js:1326
...
at rtk-query.esm.js:1418
at redux-toolkit.esm.js:386
at index.js:11
at redux-toolkit.esm.js:314
at dispatch (redux.js:659)
at redux-toolkit.esm.js:1144
at step (redux-toolkit.esm.js:38)
at Object.next (redux-toolkit.esm.js:19)
at fulfilled (redux-toolkit.esm.js:72)

我的 RTK 查询代码在这里：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import Cookie from 'js-cookie';
import React from 'react';

export interface User {
   id: string
   login: string
   password: string
   fonction: string
   imageprofil: string  
   ...
}
React.useLayoutEffect = React.useEffect
type UsersResponse = User[]

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080/api/',
    prepareHeaders: (headers) => {
        const token = Cookie.get('token');   
        if (token) {
            headers.set('authorization', `Bearer ${token}`)
        }
        return headers
    }, 

}),
 tagTypes: 'User',

endpoints: (build) => ({

getUser: build.query<User, string>({
    query: (id) => ({url:'users/'+id}),
    providesTags: 'User',        
}),    
}),
}),
})

 export const {         
     useGetUserQuery        
 } = api

Answer 1

首先，它应该是 tagTypes: ['User'], ，但这可能不是你的问题。

我认为你的 Reducer 没有安装在 [api.reducerPath] 上，或者你有多个 API（顺便说一句，除了极其罕见的边缘情况外，你应该只有一个！）它们都安装在同一个键上，因为你没有为它们指定不同的 reducerPath - 因此互相覆盖。

Answer 2

也许我找到了，谢谢@phry！

我的 configurestore 不正常。

之前

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'



export const store = configureStore({
   reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

之后

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'
import {userapi} from '../features/user/user_api.ts'



export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
    [userapi.reducerPath]: userapi.reducer
  },
  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

Answer 3

https://redux-toolkit.js.org/api/getDefaultMiddleware

包含默认中间件

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})