自用useUrlState封装体系示例

• React

钩子定义

/* eslint-disable @typescript-eslint/no-explicit-any */
import useUrlState, { Options } from '@ahooksjs/use-url-state'
import { INIT_COLLECTION } from '../store/slowLogDetailSearch'
import { INIT_RANGE } from '../store/globalSearch'
 
const useMyUrlState = <T>(params?: T, options?: Options) =>
  useUrlState(
    {
      instance: INIT_RANGE.instanceId,
      timeRange: INIT_RANGE.timeRange,
      collection: INIT_COLLECTION,
      ...params,
    },
    {
      parseOptions: { parseNumbers: true, arrayFormat: 'comma' },
      stringifyOptions: { skipNull: true, arrayFormat: 'comma' },
      navigateMode: 'replace',
      ...options,
    }
  )
 
export useMyUrlState
 
 
import { useLatest } from 'ahooks'
import useMyUrlState from './useMyUrlState'
 
export function useUrlParamMethod<
  T extends Record<string, string>,
  R,
  A extends unknown[],
  P,
>(defaultUrlParams: T, method: (params: { urlState: Partial<T> } & P, ...args: A) => R) {
  const [urlState] = useMyUrlState({ ...defaultUrlParams })
  const urlStateRef = useLatest(urlState)
  return (params: Omit<P, 'urlState'> & { urlState?: Partial<T> }, ...args: A) =>
    method({ urlState: urlStateRef.current, ...params }, ...args)
}
 

使用示例

const fetchSlowLogs = useUrlParamMethod(
  { instance: INIT_RANGE.instanceId, collection: INIT_COLLECTION },
  fetchMethod
)