解决react状态管理---React Query

什么是React Query

• react-query是一个适用于react hooks的请求库，它可以为任何类型的异步数据提供React状态管理功能，使React中的获取、缓存、同步和更新服务器数据变得轻而易举
• react-query与一些传统的状态管理库如redux,mobx不同，它是负责管理服务器与客户端之间的状态，一些用户交互的中间状态，如loading状态，错误信息等都是通过hooks直接返回
• React Query官网

初步使用

1. yarn add react-query or npm i react-query安装react-query
2. 使用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安装Devtools
• react-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()
  
    /**
     * 第一个参数是QueryKey，是查询的关键，是一个独一无二的key，并在之后的增删改中需要，
     *   如果需要动态的QueryKey，可以使用数组的方式，如['todos', params]
     * 第二个参数是用于获取数据的异步函数
     * useQuery的响应返回就是获取到的数据和一些中间状态，如isLoading，error，isIdle...
     */
    return useQuery('todos', () =>
      request('todos', { data: param })
    )
  }
  
  // 在UI组件调用
  const { isLoading, error, data: todos } = useTodos()

useMutation

• useMutation：常用于创建/更新/删除数据或执行服务器副作用

  const useAddTodo = () => {
    const request = useHttp()
  
    /**
     * 第一个参数是执行操作的异步函数，在返回的mutate中触发
     * 第二个参数是执行成功或者失败的一些配置函数，可用于一些处理缓存的操作，例如乐观更新
     */
    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) => {
    // 获取当前QueryClient的实例
    const queryClient = useQueryClient()
    
    return {
      // 当mutate被调用时触发
      async onMutate(target) {
        // 获取当前数据快照，用于错误时回滚更新
        const previousItems = queryClient.getQueryData(queryKey)
        // 乐观更新为新值
        queryClient.setQueryData(queryKey, (old) => {
          return (target, old) => (old ? [...old, target] : [])
        })
  
        // 这个返回值会作为最后一个参数传递给onError和onSettled
        return { previousItems }
      },
      // 成功回调 清除缓存
      onSuccess: () => queryClient.invalidateQueries(queryKey),
      // 失败回调
      onError(error, newItem, context) {
        // 当前queryKey的数据回滚
        queryClient.setQueryData(
          queryKey,
          context.previousItems
        )
      },
      // 无论错误或者成功都会触发，此例子没有使用
      onSettled() {}
    }
  }

总结

• 本地/客户端中间状态
  • redux与react-query都可，没有较大的优缺点
• 服务端中间状态
  • 推荐react-query，将服务器状态从全局状态中解放出来，用更少的代码实现复杂的需求，让你的状态管理更优雅