当条件发生变化时,如何调用Rtk查询挂钩



我用createApi:创建了端点

export const postsApi = createApi({
reducerPath: 'postsApi',
baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}),
tagTypes: ['Post'],
endpoints: builder => ({
getPosts: builder.query<Post[], void>({
query: () => '/posts',
providesTags: ['Post'],
}),
}), 
});
export const {useGetPostsQuery} = postsApi;

如何仅在按下按钮而不在安装组件时在组件中使用挂钩useGetPostsQuery()

我试着把它添加到组件中,它是有效的,但我不确定这是否是最佳实践:

const [click, setClick] = useState<boolean>(true);
const {data, error, isLoading} = useGetPostsQuery(undefined, {skip: click});

将其与skip一起使用的方式是有效的。另一种方法是使用useLazyQuery钩子,它只在触发时调用。

const [trigger, result] = useLazyGetPostsQuery();
const handleClick = () => {
trigger();
console.log(result.data);
};

查看RTK查询创建者的回答https://stackoverflow.com/a/69098987/12945951

是的,您的实现是正确的。当您将第二个参数作为具有skip属性的对象传递给查询时,它会阻止其在组件装载时的自动获取行为。

甚至官方文件也提出了同样的方法https://redux-toolkit.js.org/rtk-query/usage/conditional-fetching

相关内容

  • 没有找到相关文章

最新更新