对于RTK Query中的prop-drilling查询参数,应该使用queryArg的形式来获取它们,并且不建议将它们从组件的上层传递。可以在组件内部使用useSelector来获取queryArg并使用它们作为查询参数。以下是一个示例代码:
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import { useSelector } from 'react-redux'
export const blogApi = createApi({
reducerPath: 'blogApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
endpoints: (builder) => ({
getPosts: builder.query({
query: (limit = 10) => `/posts?limit=${limit}`,
}),
}),
})
export const Posts = () => {
const { data, isLoading } = useGetPostsQuery()
const { limit } = useSelector((state) => state.blogApi.queryGetPosts.queryArg)
if (isLoading) {
return Loading...
}
return (
Posts (limit: {limit})
{data.map((post) => (
- {post.title}
))}
)
}