Redux RTK不自动生成反应钩子

Question

找不到任何有关此的信息来解释为什么不生成以及如何强制它重新生成这些钩子。

首先，我认为我必须运行应用程序才能使其工作，所以yarn start。

我最终在底部导出中手动添加它们，它应该根据文档自动生成。我在这里遵循这个评论。

钩子是根据服务定义中的端点名称自动生成的。使用getPost: builder.query()的端点字段将生成名为useGetPostQuery的钩子。

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { Pokemon } from './types'
// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
reducerPath: 'pokemonApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
endpoints: (builder) => ({
getPokemonByName: builder.query<Pokemon, string>({
query: (name) => `pokemon/${name}`,
}),
getMyNewCustomEndpoint: builder.query<Pokemon, string>({
query: (name) => `pokemon/${name}`,
}),
}),
})
// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetPokemonByNameQuery, useGetMyNewCustomEndpoint } = pokemonApi

注意我自己添加的useGetMyNewCustomEndpoint。

当我导入时，我看到:

import { useGetMyNewCustomEndpoint } from './services/pokemon'

，当我把鼠标悬停在我的IDE上，我确实看到了我可以使用的属性。对突变也做了同样的尝试。似乎有效(困惑于所有这些魔法~)

无论如何，这个问题仍然在这篇文章的标题上，你如何让自动生成工作。可能遗漏了一些简单的东西。

Answer 1

我在我的nextjs与typescript项目的同一点卡住了。RTK Query没有为我提供自动生成的钩子。

我使用的导入行如下:

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

然后，我改变了导入行，如下所示:

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

然后，我可以看到自动生成的钩子，并能够导出它们以供组件使用。

Answer 2

你误解了。

自动生成钩子pokemonApi.useGetPokemonByNameQuery。您定义一个端点，然后该属性存在于pokemonApi上。就是这样。

你必须手工导出——没有魔法可以改变你的文件。

Answer 3

我的回答并不能完全解决这个问题，但它可以帮助有同样麻烦的人。注意从哪里导入createApi, fetchBaseQuery。例如vscode Autoimport,从这条路可以从@reduxjs/toolkit/dist/query进口但是功能不提供autogenrated钩子。

Answer 4

我有一个关于RTK生成的钩子的问题，它是生成的钩子不获取或调用API没有任何错误

我搜索了真的关于这个，只是找到这个stackoverflow页面和非答案不帮助我

但最后我找到了问题，它真的很傻，穿只是改变你的查询名称

例如我查询的名字是

export const brandApi = createApi({
reducerPath: 'brandApi',
baseQuery: fetchBaseQuery({
baseUrl: `${BASE_URL}/user`,
}),
endpoints: builder => ({
getBrand: builder.query<IUserResponse, void>({
query() {
return {
url: '/brand',
credentials: 'include',
};
},
}),
}),
});
export const { useGetBrandQuery } = brandApi;

我只是把名字从getBrand改为getBrands，它工作得很好:)