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 with typescript 项目中遇到了同样的问题。RTK 查询没有为我提供自动生成的挂钩。

我使用的导入行如下：

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

然后，我更改了导入行，如下所示：

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

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

Answer 2

你读错了。

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

您必须手动导出它 - 没有任何魔法可以更改您的文件。