从外部文件 React Typescript 定义 useSelector 类型

Question

Is there any way I could define useSelector <TRootState, string> in external file and apply it directly inside Component's file?

External file:

export type TUser = <TRootState, string> // not working

Component's file:

import { TUser } from "./pathToFile"
const user = useSelector<TUser>(selectUser)

I'm able to define the type with:

const user = useSelector<TRootState, string>(selectUser)

But I like to define it once and apply it in every file that needs it. How it could be done?

Answer 1

I've solved this in some my projects by creating a strongly typed wrapper around useSelector that I require instead.

// selectors.ts
import { useSelector as reduxUseSelector } from 'react-redux'
import { StoreState } from './store'

/** Application specific strongly typed wrapper around redux's useSelector(). */
export function useSelector<T>(fn: (state: StoreState) => T): T {
  return reduxUseSelector(fn)
}

Now you can just do:

import { useSelector } from './selectors'

function Component() {
  const foo = useSelector(state => state.foo) // state is typed here
  //...
}

And I would then say that selectUser should instead be a hook that calls this version of useSelector for you.

import { useSelector } from './selectors'

export function useCurrentUser(): User {
  return useSelector(state => state.user)
}

function Component() {
  const user = useCurrentUser()
  //...
}