什么是React Query
react-query
是一个适用于react hooks的请求库,它可以为任何类型的异步数据提供React状态管理功能,使React中的获取、缓存、同步和更新服务器数据变得轻而易举react-query
与一些传统的状态管理库如redux,mobx不同,它是负责管理服务器与客户端之间的状态,一些用户交互的中间状态,如loading状态,错误信息等都是通过hooks直接返回React Query官网
初步使用
yarn add react-query
or npm i react-query
安装react-query使用QueryClientProvider
组件连接并提供一个QueryClient
到你的应用程序
import { QueryClient, QueryClientProvider } from 'react-query'
< QueryClientProvider client= { new QueryClient ( ) } >
{ ... }
< / QueryClientProvider>
Devtools
yarn add react-query-devtools
or npm i --save react-query-devtools
安装Devtoolsreact-query-devtools
是与react-query
相匹配的开发工具可在开发中实时查看缓存,手动获取和删除查询等等
import { ReactQueryDevtools } from 'react-query-devtools'
const App = ( ) => {
return (
< >
{ ... }
< ReactQueryDevtools initialIsOpen= { true } / >
< / >
) ;
} ;
增删改查
react-query最常用的两个hook,查询(useQuery
)、增删改(useMutation
)
useQuery
useQuery
:在React Query
中,查询是对某些异步数据源的声明性依赖。查询可以与任何基于Promise的方法(GET)一起使用,从服务器获取数据
const useTodos = ( param ) => {
const request = useHttp ( )
return useQuery ( 'todos' , ( ) =>
request ( 'todos' , { data: param } )
)
}
const { isLoading, error, data: todos } = useTodos ( )
useMutation
useMutation
:常用于创建/更新/删除数据或执行服务器副作用
const useAddTodo = ( ) => {
const request = useHttp ( )
return useMutation (
( data ) =>
request ( ` todos ` , {
data,
method: 'POST' ,
} ) ,
{
onSuccess ( ) { }
onError ( ) { }
onSettled ( ) { }
...
}
)
}
const TodosAddBtn = ( ) => {
...
const { mutateAsync, isLoading, error } = useAddTodo ( )
return < Button onClick= { ( ) => mutateAsync ( todoData) } > add< / Button>
}
例:用第二个参数配置乐观更新
乐观更新就是在一些请求或者数据处理没有结束的时候,提前给用户显示理想的结果,如果失败就回滚更新
const useAddConfig = ( queryKey ) => {
const queryClient = useQueryClient ( )
return {
async onMutate ( target ) {
const previousItems = queryClient. getQueryData ( queryKey)
queryClient. setQueryData ( queryKey, ( old ) => {
return ( target, old ) => ( old ? [ ... old, target] : [ ] )
} )
return { previousItems }
} ,
onSuccess : ( ) => queryClient. invalidateQueries ( queryKey) ,
onError ( error, newItem, context ) {
queryClient. setQueryData (
queryKey,
context. previousItems
)
} ,
onSettled ( ) { }
}
}
总结
本地/客户端中间状态
redux与react-query都可,没有较大的优缺点 服务端中间状态
推荐react-query,将服务器状态从全局状态中解放出来,用更少的代码实现复杂的需求,让你的状态管理更优雅