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";
然后,我可以看到自动生成的挂钩并能够导出它们以供在组件中使用。
找不到关于此的任何信息来解释为什么它不生成以及如何强制它 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";
然后,我可以看到自动生成的挂钩并能够导出它们以供在组件中使用。