Redux RTK 不是 auto-generating 反应挂钩

Redux RTK not auto-generating react hooks

找不到关于此的任何信息来解释为什么它不生成以及如何强制它 re-generate 这些挂钩。

首先我认为我必须 运行 应用程序才能正常工作 yarn start

根据文档,我最终手动将它们添加到应该 auto-generate 的底部导出位置。我关注这条评论 here.

Hooks are automatically generated based on the name of the endpoint in the service definition. An endpoint field with getPost: builder.query() will generate a hook named 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 中将鼠标悬停在它上面时,我确实看到了我可以使用的属性。也尝试了突变。似乎有效(被所有这些魔法搞糊涂了~)

无论如何,问题仍然在这个 post 的标题上,你如何让 auto-generating 工作。可能遗漏了一些简单的东西。

你看错了。

它正在自动生成挂钩 pokemonApi.useGetPokemonByNameQuery。您定义了一个端点,然后 属性 存在于 pokemonApi 上。就这些了。

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

我的回答并没有解决这个确切的问题,但它可以帮助遇到同样问题的人。请注意您从何处导入 createApi, fetchBaseQuery 。自动导入,例如 vscode,可以从 @reduxjs/toolkit/dist/query 导入它,但此路径中的函数不提供自动生成的挂钩。

我在 nextjs with typescript 项目中停留在同一点。 RTK 查询没有为我提供自动生成的钩子。

我使用的导入行如下:

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

然后,我像下面这样更改了导入行:

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

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