Redux Toolkit：如何在官方文档中编写 getposts 端点

Question

我正在尝试学习 RTKQuery，但一些文档和示例不完整。

这个 link 指的是一个 useGetPostsQuery 但实际上并没有在文档中定义它的端点。

https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result

function PostsList() {
  const { data: posts } = api.useGetPostsQuery() // what does the endpoint look like?

  return (
    <ul>
      {posts?.data?.map((post) => (
        <PostById key={post.id} id={post.id} />
      ))}
    </ul>
  )
}

在没有工作示例的情况下，我试图编写自己的 getMultipleItems 端点，但我看到了 TS 错误。我修改了文档 pokemon 示例以也从 api 查询列表。实时沙箱：

https://codesandbox.io/s/rtk-query-multi-fetch-poll-r4m2r

export const pokemonApi = createApi({
  reducerPath: "pokemonApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://pokeapi.co/api/v2/" }),
  tagTypes: [],
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name: string) => `pokemon/${name}`
    }),
    // this is meant to get all pokemon but is causing type errors
    getAllPokemon: builder.query({
      query: () => `pokemon/`
    })
  })
});

关注相关端点，getAllPokemon 没有任何参数：

    getAllPokemon: builder.query({
      query: () => `pokemon/`
    })

然后我尝试在这里使用它，但是 useGetAllPokemonQuery 没有正确的签名并且似乎需要 args。

export const PokemonList = () => {
  const { data, error, isLoading } = useGetAllPokemonQuery();
  return (
    <>
      {error ? (
        <p>Fetch error</p>
      ) : isLoading ? (
        <p>Loading...</p>
      ) : data ? (
        <>
          <p>map pokemon here</p>
        </>
      ) : null}
    </>
  );
};

我的问题是：如何正确构造端点以在上面显示的组件示例中使用它？

Answer 1

你的情况：

    getAllPokemon: builder.query<YourResultType, void>({
      query: () => `pokemon/`
    })

使用 void 作为“参数类型”。

值得一提的是，https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react 下的所有示例都使用 TypeScript。你可能只想看看那些。

Redux Toolkit：如何在官方文档中编写 getposts 端点

Redux Toolkit: how to write the getposts endpoint in official documentation

redux

redux-toolkit

rtk-query