DEV Community
·
如何创建和测试用于全局加载指示器的 React Query 钩子
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
本文讲解如何用 React Query 创建自定义钩子 `useServiceConfig`，通过 `useIsFetching`、`useIsMutating` 和 `useIsRestoring` 判断服务调用状态，以管理全局加载状态。使用 Jest 进行单元测试，模拟不同状态验证钩子功能，帮助应用显示加载指示器，并可扩展钩子功能。
🎯
关键要点
-
React Query 是处理 React 应用中数据获取、缓存和同步的强大工具。
-
创建自定义钩子 useServiceConfig，用于判断服务调用状态以管理全局加载状态。
-
使用 useIsFetching、useIsMutating 和 useIsRestoring 函数来检查服务调用是否待处理。
-
使用 useMemo 组合这些状态，返回一个布尔值表示是否有服务调用待处理。
-
使用 Jest 进行单元测试，确保钩子按预期工作。
-
测试用例包括默认模式、特定模式（fetching、mutating、restoring）下的状态验证。
-
运行测试以确保所有测试通过，验证钩子的功能。
-
可以扩展钩子以接受其他参数，进一步自定义其行为。
-
探索更多 React Query 的工具，以提升应用性能和用户体验。
➡️
