对react+ts项目中的useSelector进行类型封装
为什么需要封装?
今天在写react+ts的项目时发现我们在进行redux数据共享时出现了无法识别类型等情况
无法识别类型:
具体的原因就是因为我们这里的state是unknow类型我们不能进行任何的操作
没有友好的提示
出现这些情况的原因就是我们的state类型无法正常的获取我们可以对其进行封装一些
先进行简单的封装
思路我们可以通过store中的getstate获取到对应的类型
第一步我们先引入一下你的store
从你的store上拿到你的getState 对他进行一次类型检测你可以发现他的返回值就是你需要的类型
我们这里又因为使用的ts我们想获取他的返回值类型还是很简单的
type IRootState = ReturnType<GetstateFunType>
那么我们现在就拿到了对应的数据类型把他给到我们的state上面我们的state就能正常的使用了
这个就是基本的思路接下来我们进行更深的封装
深度封装
我们可以对useSelector进行一个小小的封装
type GetstateFunType = typeof store.getState //我们可以发现他的返回值类型就是我们需要的类型
type IRootState = ReturnType<GetstateFunType> //这样我们就获取到了他的返回值类型
export const useAppSelector: TypedUseSelectorHook<IRootState> = useSelector
你自己声明一个useAppSelector让他等于react-redux的useSelector在这些基础之上我们进行一个类型的封装
这里我们需要借助react-redux中的一个工具TypedUseSelectorHook
我们可以看一下他的源码
export interface TypedUseSelectorHook<TState> {
<TSelected>(selector: (state: TState) => TSelected, equalityFn?: EqualityFn<NoInfer<TSelected>>): TSelected;
}
我们发现他的第一个参数是一个函数调用签名
selector: (state: TState) => TSelected
我们发现TypedUseSelectorHook他的泛型类型是TState
那么我们只需要把我们获取到的类型通过泛型传递给TState
这样的话他的第一个参数的state就能获取到我们传递过去的类型了
附加 ----我的store 和一些数据
我的store:
我的counter:
ore 和一些数据
我的store:
[外链图片转存中…(img-x3s4f4jl-1674573720206)]
我的counter: