Определите тип useSelector из внешнего файла React Typescript

Question

Можно ли каким-либо образом определить useSelector <TRootState, string> во внешнем файле и применить его непосредственно внутри файла компонента?

Внешний файл:

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

Файл компонента:

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

Я могу определить тип с помощью:

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

Но мне нравится определять его один раз и применять к каждому файлу, который в нем нуждается. Как это можно было сделать?

Answer 1

Я решил эту проблему в некоторых своих проектах, создав строго типизированную оболочку вокруг useSelector, которая мне нужна взамен.

// 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)
}

Теперь вы можете просто сделать:

import { useSelector } from './selectors'

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

И я бы сказал, что selectUser вместо этого должен быть ловушкой, которая вызывает эту версию useSelector для вас.

import { useSelector } from './selectors'

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

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